better layout

Kiln-AI · Oct 17, 2024 · 05361e0 · 05361e0
1 parent 61d94b7
commit 05361e0
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 42 deletions.
diff --git a/app/web_ui/src/lib/utils/form_element.svelte b/app/web_ui/src/lib/utils/form_element.svelte
@@ -106,7 +106,7 @@
         autocomplete="off"
       />
     {:else if inputType === "select"}
-      <select {id} class="select select-bordered" bind:value>
+      <select {id} class="select select-bordered w-full" bind:value>
         {#if select_options_grouped.length > 0}
           {#each select_options_grouped as group}
             <optgroup label={group[0]}>

diff --git a/app/web_ui/src/routes/(app)/run/+page.svelte b/app/web_ui/src/routes/(app)/run/+page.svelte
@@ -108,26 +108,37 @@
 </script>
 
 <AppPage title="Run" bind:subtitle>
-  <div class="flex flex-col gap-2 w-full max-w-[800px]">
-    <FormContainer
-      submit_label="Run"
-      on:submit={run_task}
-      bind:warn_before_unload
-      bind:error
-      bind:submitting
-    >
-      <div class="flex flex-row gap-2 items-center">
-        <div class="text-xl font-bold">Inputs</div>
-        <div class="grow"></div>
+  <div class="max-w-[1400px]">
+    <div class="flex flex-col xl:flex-row gap-8 xl:gap-16">
+      <div class="grow">
+        <div class="text-xl font-bold">Input</div>
+        <FormContainer
+          submit_label="Run"
+          on:submit={run_task}
+          bind:warn_before_unload
+          bind:error
+          bind:submitting
+        >
+          <div class="flex flex-row gap-2 items-center"></div>
+          <FormElement
+            label="Plaintext Input"
+            inputType="textarea"
+            bind:value={plaintext_input}
+            id="plaintext_input"
+          />
+        </FormContainer>
+      </div>
+      <div class="w-72 2xl:w-96 flex flex-col gap-4">
+        <div class="text-xl font-bold">Options</div>
         <FormElement
           label="Prompt Method"
           inputType="select"
           bind:value={prompt_method}
           id="prompt_method"
           select_options={[
             ["basic", "Basic Prompt (Zero Shot)"],
-            ["few_shot", "Few Shot (include a few examples)"],
-            ["many_shot", "Multi Shot (include many examples)"],
+            ["few_shot", "Few Shot"],
+            ["many_shot", "Multi Shot"],
           ]}
         />
         <FormElement
@@ -174,30 +185,24 @@
           ]}
         />
       </div>
-      <FormElement
-        label="Plaintext Input"
-        inputType="textarea"
-        bind:value={plaintext_input}
-        id="plaintext_input"
-      />
-    </FormContainer>
-  </div>
-  {#if $current_task && !submitting && response != null && $current_project}
-    {#if response.run != null}
-      <div class="mt-10 max-w-[1400px]">
-        <Run
-          initial_run={response?.run}
-          task={$current_task}
-          project_id={$current_project.id}
+    </div>
+    {#if $current_task && !submitting && response != null && $current_project}
+      {#if response.run != null}
+        <div class="mt-10 xl:mt-32">
+          <Run
+            initial_run={response?.run}
+            task={$current_task}
+            project_id={$current_project.id}
+          />
+        </div>
+      {:else if response?.raw_output}
+        <!-- The response.run object may be nil if the run isn't saved (env var option for this). We still want to show the output though. -->
+        <div class="text-xl font-bold mt-10 mb-4">Run Output</div>
+        <Output
+          structured={!!$current_task?.output_json_schema}
+          raw_output={response.raw_output}
         />
-      </div>
-    {:else if response?.raw_output}
-      <!-- The response.run object may be nil if the run isn't saved (env var option for this). We still want to show the output though. -->
-      <div class="text-xl font-bold mt-10 mb-4">Run Output</div>
-      <Output
-        structured={!!$current_task?.output_json_schema}
-        raw_output={response.raw_output}
-      />
+      {/if}
     {/if}
-  {/if}
+  </div>
 </AppPage>
diff --git a/app/web_ui/src/routes/(app)/run/run.svelte b/app/web_ui/src/routes/(app)/run/run.svelte
@@ -120,7 +120,7 @@
 </script>
 
 <div>
-  <div class="flex flex-col xl:flex-row gap-8">
+  <div class="flex flex-col xl:flex-row gap-8 xl:gap-16">
     <div class="grow">
       <div class="text-xl font-bold mb-1">Outputs</div>
       {#if task.output_json_schema}
@@ -143,7 +143,7 @@
       />
     </div>
 
-    <div>
+    <div class="w-72 2xl:w-96">
       <div class="text-xl font-bold mt-10 lg:mt-0 mb-6">
         Output Rating
         {#if save_rating_error}
@@ -160,8 +160,8 @@
           </button>
         {/if}
       </div>
-      <div class="grid grid-cols-[auto,1fr] gap-4">
-        <div class="font-medium flex items-center text-nowrap">
+      <div class="grid grid-cols-[auto,1fr] gap-4 text-sm 2xl:text-base">
+        <div class="font-medium flex items-center text-nowrap 2xl:min-w-32">
           Overall Rating:
         </div>
         <div class="flex items-center">