service page: update empty message

Update the message when there is no service running.  We did the same
for playgrounds already.

Signed-off-by: Valentin Rothberg <[email protected]>

Author: vrothberg

packages/frontend/src/pages/InferenceServers.spec.ts

@@ -56,7 +56,7 @@ test('no inference servers should display a status message', async () => {
   render(InferenceServers);
   const status = screen.getByRole('status');
   expect(status).toBeInTheDocument();
-  expect(status.textContent).toBe('There is no services running for now.');
+  expect(status.textContent).toContain('There is no model service. ');
 
   const table = screen.queryByRole('table');
   expect(table).toBeNull();

packages/frontend/src/pages/InferenceServers.svelte

@@ -67,7 +67,21 @@ function createNewService() {
               row="{row}"
               bind:selectedItemsNumber="{selectedItemsNumber}" />
           {:else}
-            <div role="status">There is no services running for now.</div>
+            <div role="status">
+              There is no model service. You can <a
+                href="{'javascript:void(0);'}"
+                class="underline"
+                role="button"
+                title="Create a new Model Service"
+                on:click="{createNewService}">create one now</a
+              >.
+            </div>
+            <p>
+              A model service offers a configurable endpoint via an OpenAI-compatible web server, facilitating a
+              seamless integration of AI capabilities into existing applications. Upon initialization, effortlessly
+              access detailed service information and generate code snippets in multiple programming languages to ease
+              application integration.
+            </p>
           {/if}
         </div>
       </div>