Merge pull request #3 from Kiln-AI/style

App Style
Kiln-AI · Sep 30, 2024 · 9db2207 · 9db2207
2 parents eacd024 + b9a0fc9
commit 9db2207
Show file tree

Hide file tree

Showing 17 changed files with 119 additions and 160 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,11 +7,6 @@
     },
     "editor.tabSize": 4,
   },
-  "eslint.validate": ["javascript", "javascriptreact", "svelte"],
-  // Svelte, JS, TS files
-  "[javascript, typescript, svelte, json]": {
-    "editor.defaultFormatter": "svelte.svelte-vscode"
-  },
   "python.testing.pytestArgs": [
     ".",
     "-s",
@@ -26,4 +21,15 @@
     "**/dist": true,
     "**/node_modules": true
   },
+  // Svelte, JS, TS files
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "svelte"],
 }
diff --git a/app/web_ui/package.json b/app/web_ui/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "cmsassstarter",
-  "version": "0.0.1",
+  "name": "kiln-web-ui",
+  "version": "0.0.2",
   "private": true,
   "scripts": {
     "dev": "vite dev",

diff --git a/app/web_ui/src/app.html b/app/web_ui/src/app.html
@@ -9,6 +9,7 @@
   <body
     data-sveltekit-preload-data="hover"
     style="min-height: 100vh; display: flex; flex-direction: column"
+    class="bg-base-200"
   >
     <div style="display: contents">%sveltekit.body%</div>
   </body>

diff --git a/app/web_ui/src/routes/(app)/+layout.svelte b/app/web_ui/src/routes/(app)/+layout.svelte
@@ -2,77 +2,58 @@
   import "../../app.css"
 </script>
 
-<div class="navbar bg-base-100 container mx-auto">
-  <div class="flex-1">
-    <a class="btn btn-ghost normal-case text-xl" href="/">Kiln Studio</a>
-  </div>
-  <div class="flex-none">
-    <ul class="menu menu-horizontal px-1 hidden sm:flex font-bold text-lg">
-      <li class="md:mx-2"><a href="/">Home</a></li>
-      <li class="md:mx-2"><a href="/">Also Home</a></li>
-    </ul>
-    <div class="dropdown dropdown-end sm:hidden">
-      <!-- svelte-ignore a11y-label-has-associated-control -->
-      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-      <label tabindex="0" class="btn btn-ghost btn-circle">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          ><path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M4 6h16M4 12h16M4 18h7"
-          /></svg
-        >
-      </label>
-      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-      <ul
-        tabindex="0"
-        class="menu menu-lg dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 font-bold"
-      >
-        <li><a href="/">Home</a></li>
-        <li><a href="/">Also Home</a></li>
-      </ul>
+<div class="drawer lg:drawer-open">
+  <input id="main-drawer" type="checkbox" class="drawer-toggle" />
+  <div class="drawer-content flex flex-col lg:mx-4 min-h-screen">
+    <div class="flex-none h-12">
+      <div class="flex flex-row h-full items-center">
+        <label for="main-drawer" class="drawer-button lg:hidden">
+          <svg
+            class="size-6 mx-3"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+          >
+            <path
+              fill="currentColor"
+              fill-rule="evenodd"
+              d="M19 4a1 1 0 01-1 1H2a1 1 0 010-2h16a1 1 0 011 1zm0 6a1 1 0 01-1 1H2a1 1 0 110-2h16a1 1 0 011 1zm-1 7a1 1 0 100-2H2a1 1 0 100 2h16z"
+            />
+          </svg>
+        </label>
+        <div class="flex-grow"></div>
+      </div>
     </div>
-  </div>
-</div>
 
-<div class="">
-  <slot />
-</div>
+    <div class="flex-grow rounded-t-lg bg-base-100 shadow-lg p-4">
+      <slot />
+    </div>
+  </div>
+  <div class="drawer-side">
+    <label for="main-drawer" aria-label="close sidebar" class="drawer-overlay"
+    ></label>
 
-<!-- Spacer grows so the footer can be at bottom on short pages -->
-<div class="flex-grow"></div>
-<div class="">
-  <div class="border-t max-w-[1000px] mx-auto"></div>
-  <footer
-    class="footer p-10 gap-x-48 lg:gap-x-64 xl:gap-x-96 place-content-center text-base"
-  >
-    <nav>
-      <span class="footer-title opacity-80">Explore</span>
-      <a class="link link-hover mb-1" href="/">Home</a>
-      <a class="link link-hover mb-1" href="/">Home Again</a>
-      <a class="link link-hover my-1" href="https://github.com/kiln-ai"
-        >Github</a
-      >
-    </nav>
-    <aside>
-      <span class="footer-title opacity-80">Sponsor</span>
-      <a
-        class="link link-hover max-w-[260px]"
-        href="https://criticalmoments.io"
-      >
-        <img
-          alt="Critical Moments Logo"
-          src="/images/cm_logo.svg"
-          class="w-[180px] mb-3 aspect-[420/154]"
-        />
-        Make mobile apps? Improve conversion rates and ratings with Critical Moments.
-      </a>
-    </aside>
-  </footer>
+    <ul
+      class="menu bg-base-200 text-base-content min-h-full w-72 lg:w-60 p-4 pt-1 lg:pt-4"
+    >
+      <li class="hover:bg-transparent flex flex-row justify-end">
+        <label
+          for="main-drawer"
+          class="lg:hidden ml-3 text-2xl cursor-pointer ml-4 pt-[5px]"
+        >
+          &#x2715;
+        </label>
+      </li>
+      <li class="mb-4">
+        <a href="https://kiln-ai.com" target="_blank">
+          <div class="flex flex-row items-center mx-[-5px] p-0">
+            <img src="/logo.svg" alt="logo" class="w-8 h-8" />
+            <div class="text-lg font-bold ml-1">Kiln AI</div>
+          </div>
+        </a>
+      </li>
+      <li><a href="/?1">Sidebar Item 1</a></li>
+      <li><a href="/?2">Sidebar Item 2</a></li>
+    </ul>
+  </div>
 </div>
diff --git a/app/web_ui/src/routes/(app)/+page.svelte b/app/web_ui/src/routes/(app)/+page.svelte
@@ -1,53 +1,9 @@
 <script lang="ts">
-  import {
-    WebsiteName,
-    WebsiteBaseUrl,
-    WebsiteDescription,
-  } from "./../../config"
-
-  const ldJson = {
-    "@context": "https://schema.org",
-    "@type": "WebSite",
-    name: WebsiteName,
-    url: WebsiteBaseUrl,
-  }
-  const jsonldScript = `<script type="application/ld+json">${
-    JSON.stringify(ldJson) + "<"
-  }/script>`
 </script>
 
 <svelte:head>
-  <title>{WebsiteName}</title>
-  <meta name="description" content={WebsiteDescription} />
-  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-  {@html jsonldScript}
+  <title>Kiln Studio</title>
+  <meta name="description" content="The open source ML product platform" />
 </svelte:head>
 
-<div class="hero min-h-[60vh]">
-  <div class="hero-content text-center py-12">
-    <div class="max-w-xl">
-      <div
-        class="text-xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent mb-4 md:mb-8"
-      >
-        Kiln Studio
-      </div>
-
-      <div
-        class="text-4xl md:text-6xl font-bold px-2"
-        style="line-height: 1.2;"
-      >
-        The
-        <span
-          class="underline decoration-secondary decoration-4 md:decoration-[6px]"
-          >open source</span
-        >
-        <span> ML product platform</span>
-      </div>
-      <div class="mt-16 md:mt-6">
-        <a href="https://github.com/kiln-ai">
-          <button class="btn btn-primary px-6">★ US ON GITHUB</button>
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
+<h1>Home</h1>
diff --git a/app/web_ui/src/routes/(app)/+page.ts → app/web_ui/src/routes/+layout.ts b/app/web_ui/src/routes/(app)/+page.ts → app/web_ui/src/routes/+layout.ts
diff --git a/app/web_ui/static/logo.svg b/app/web_ui/static/logo.svg
diff --git a/app/web_ui/tailwind.config.js b/app/web_ui/tailwind.config.js
@@ -8,19 +8,27 @@ export default {
   daisyui: {
     themes: [
       {
-        saasstartertheme: {
-          primary: "#180042",
-          "primary-content": "#fefbf6",
-          secondary: "#c7b9f8",
-          neutral: "#180042",
-          "neutral-content": "#fefbf6",
-          accent: "#db2777",
-          "accent-content": "#180042",
-          "base-content": "#180042",
-          "base-100": "#fefbf6",
-          "base-200": "#faedd6",
-          success: "#37d399",
-          error: "#f77272",
+        kilntheme: {
+          primary: "#ffffff",
+          "primary-content": "#161616",
+          secondary: "#ffffff",
+          "secondary-content": "#161616",
+          accent: "#ffffff",
+          "accent-content": "#161616",
+          neutral: "#000000",
+          "neutral-content": "#bebebe",
+          "base-100": "#ffffff",
+          "base-200": "#F5F5F5",
+          "base-300": "#bebebe",
+          "base-content": "#161616",
+          info: "#a6ffff",
+          "info-content": "#0a1616",
+          success: "#8effe4",
+          "success-content": "#071612",
+          warning: "#fff590",
+          "warning-content": "#161507",
+          error: "#ffd7c5",
+          "error-content": "#16110e",
         },
       },
     ],

diff --git a/checks.sh b/checks.sh
@@ -22,13 +22,15 @@ echo "No misspellings found"
 
 
 echo "${headerStart}Web UI: format, lint, check${headerEnd}"
-changed_files=$(git diff --name-only)
+changed_files=$(git diff --name-only --staged)
 if [[ "$changed_files" == *"app/web_ui/"* ]]; then
     echo "${headerStart}Checking Web UI: format, lint, check${headerEnd}"
     cd app/web_ui
     npm run format_check
     npm run lint
     npm run check
+    echo "Running vite build"
+    npm run build > /dev/null
     cd ../..
 else
     echo "Skipping Web UI: no files changed"

diff --git a/libs/core/kiln_ai/adapters/base_adapter.py b/libs/core/kiln_ai/adapters/base_adapter.py
@@ -2,8 +2,8 @@
 from abc import ABCMeta, abstractmethod
 from typing import Dict
 
+from kiln_ai.datamodel import Task
 from kiln_ai.datamodel.json_schema import validate_schema
-from kiln_ai.datamodel.models import Task
 
 
 class BaseAdapter(metaclass=ABCMeta):

diff --git a/libs/core/kiln_ai/adapters/langchain_adapters.py b/libs/core/kiln_ai/adapters/langchain_adapters.py
@@ -1,6 +1,6 @@
 from typing import Dict
 
-import kiln_ai.datamodel.models as models
+import kiln_ai.datamodel as datamodel
 from kiln_ai.adapters.prompt_builders import SimplePromptBuilder
 from langchain_core.language_models.chat_models import BaseChatModel
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -13,7 +13,7 @@
 class LangChainPromptAdapter(BaseAdapter):
     def __init__(
         self,
-        kiln_task: models.Task,
+        kiln_task: datamodel.Task,
         custom_model: BaseChatModel | None = None,
         model_name: str | None = None,
         provider: str | None = None,

diff --git a/libs/core/kiln_ai/adapters/test_prompt_adaptors.py b/libs/core/kiln_ai/adapters/test_prompt_adaptors.py
@@ -1,7 +1,7 @@
 import os
 from pathlib import Path
 
-import kiln_ai.datamodel.models as models
+import kiln_ai.datamodel as datamodel
 import pytest
 from kiln_ai.adapters.langchain_adapters import LangChainPromptAdapter
 from kiln_ai.adapters.ml_model_list import built_in_models, ollama_online
@@ -95,30 +95,30 @@ async def test_all_built_in_models(tmp_path):
 
 
 def build_test_task(tmp_path: Path):
-    project = models.Project(name="test", path=tmp_path / "test.kiln")
+    project = datamodel.Project(name="test", path=tmp_path / "test.kiln")
     project.save_to_file()
     assert project.name == "test"
 
-    task = models.Task(parent=project, name="test task")
+    task = datamodel.Task(parent=project, name="test task")
     task.save_to_file()
     assert task.name == "test task"
     task.instruction = (
         "You are an assistant which performs math tasks provided in plain text."
     )
 
-    r1 = models.TaskRequirement(
+    r1 = datamodel.TaskRequirement(
         parent=task,
         name="BEDMAS",
         instruction="You follow order of mathematical operation (BEDMAS)",
     )
     r1.save_to_file()
-    r2 = models.TaskRequirement(
+    r2 = datamodel.TaskRequirement(
         parent=task,
         name="only basic math",
         instruction="If the problem has anything other than addition, subtraction, multiplication, division, and brackets, you will not answer it. Reply instead with 'I'm just a basic calculator, I don't know how to do that'.",
     )
     r2.save_to_file()
-    r3 = models.TaskRequirement(
+    r3 = datamodel.TaskRequirement(
         parent=task,
         name="Answer format",
         instruction="The answer can contain any content about your reasoning, but at the end it should include the final answer in numerals in square brackets. For example if the answer is one hundred, the end of your response should be [100].",
@@ -133,7 +133,7 @@ async def run_simple_test(tmp_path: Path, model_name: str, provider: str | None
     return await run_simple_task(task, model_name, provider)
 
 
-async def run_simple_task(task: models.Task, model_name: str, provider: str):
+async def run_simple_task(task: datamodel.Task, model_name: str, provider: str):
     adapter = LangChainPromptAdapter(task, model_name=model_name, provider=provider)
 
     answer = await adapter.invoke(

diff --git a/libs/core/kiln_ai/adapters/test_prompt_builders.py b/libs/core/kiln_ai/adapters/test_prompt_builders.py
@@ -4,7 +4,7 @@
 from kiln_ai.adapters.prompt_builders import MultiShotPromptBuilder, SimplePromptBuilder
 from kiln_ai.adapters.test_prompt_adaptors import build_test_task
 from kiln_ai.adapters.test_structured_output import build_structured_output_test_task
-from kiln_ai.datamodel.models import (
+from kiln_ai.datamodel import (
     Example,
     ExampleOutput,
     ExampleSource,