Add designed index page

platformatic · May 9, 2024 · 0472cb2 · 0472cb2
1 parent cdb4bd4
commit 0472cb2
Show file tree

Hide file tree

Showing 16 changed files with 916 additions and 67 deletions.
diff --git a/static/chat.html b/static/chat.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat - AI Warp</title>
+
+    <link rel="stylesheet" href="/styles/common.css">
+    <link rel="stylesheet" href="/styles/chat.css">
+</head>
+<body>
+    <div id="navbar">
+        <a href="https://platformatic.dev">
+            <img id="navbar-logo" src="/images/platformatic-logo.svg" alt="Platformatic">
+        </a>
+    </div>
+
+    <div id="messages"></div>
+
+    <div id="prompt">
+        <input id="prompt-input" type="text" placeholder="Enter your prompt to Platformatic Ai-Warp" />
+        <button id="prompt-button" type="button">
+            <img src="/images/icons/arrow-long-right.svg" />
+        </button>
+    </div>
+
+    <div id="bottom-links">
+        <a href="/chat.html">Start a new chat</a>
+        <a href="/documentation">View OpenAPI Documentation</a>
+    </div>
+
+    <script src="/scripts/chat.js"></script>
+</body>
+</html>
diff --git a/static/images/avatars/platformatic.svg b/static/images/avatars/platformatic.svg
diff --git a/static/images/avatars/you.svg b/static/images/avatars/you.svg
diff --git a/static/images/icons/arrow-long-right.svg b/static/images/icons/arrow-long-right.svg
diff --git a/static/images/icons/checkmark.svg b/static/images/icons/checkmark.svg
diff --git a/static/images/icons/copy.svg b/static/images/icons/copy.svg
diff --git a/static/images/icons/edit.svg b/static/images/icons/edit.svg
diff --git a/static/images/icons/error.svg b/static/images/icons/error.svg
diff --git a/static/images/icons/regenerate.svg b/static/images/icons/regenerate.svg
diff --git a/static/images/main-illustration.svg b/static/images/main-illustration.svg
diff --git a/static/images/platformatic-logo.svg b/static/images/platformatic-logo.svg
diff --git a/static/index.html b/static/index.html
@@ -4,83 +4,102 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Warp</title>
+
+    <link rel="stylesheet" href="/styles/common.css">
+    <link rel="stylesheet" href="/styles/index.css">
 </head>
 <body>
-    <div>
-        <label for="prompt-text">Prompt: </label>
-        <textarea name="prompt text" id="prompt-text" cols="60" rows="1"></textarea>
-        <button id="prompt-button">Prompt</button>
+    <div id="navbar">
+        <a href="https://platformatic.dev">
+            <img id="navbar-logo" src="/images/platformatic-logo.svg" alt="Platformatic">
+        </a>
     </div>
 
-    <p id="response"></p>
-
-    <script>
-        const promptText = document.getElementById('prompt-text')
-        const responseText = document.getElementById('response')
-
-        const promptButton = document.getElementById('prompt-button')
-        promptButton.onclick = async () => {
-            const res = await fetch('/api/v1/stream', {
-                method: 'POST',
-                headers: {
-                    'content-type': 'application/json'
-                },
-                body: JSON.stringify({
-                    prompt: promptText.value
-                })
-            })
-
-            if (res.status !== 200) {
-                const { message, code } = await res.json()
-                responseText.innerHTML = `Error: ${message} (${code})`
-                return
-            }
-
-            responseText.innerHTML = ''
-
-            const reader = res.body.getReader()
-            const decoder = new TextDecoder()
-            while (true) {
-                const { done, value } = await reader.read()
-                if (done) {
-                    break
-                }
+    <div id="main-illustration">
+        <img src="/images/main-illustration.svg" alt="Main Illustration" />
+    </div>
 
-                const decodedValue = decoder.decode(value)
-                const lines = decodedValue.split('\n')
+    <div id="greeting">
+        <h1>Welcome to</h1>
+        <h1>Platformatic Ai-Warp</h1>
+    </div>
 
-                let i = 0
-                while (i < lines.length) {
-                    const line = lines[i]
-                    if (line.length === 0) {
-                        i++
-                        continue
-                    }
+    <div id="prompt-suggestions">
+        <div class="prompt-suggestion-column">
+            <div class="prompt-suggestion">
+                <p class="prompt-suggestion-title">Generate SQL</p>
+                <p class="prompt-suggestion-subtitle">
+                    for an ecommerce's online store
+                    <span>
+                        <a href="/chat.html?prompt=Please%20generate%20SQL%20for%20an%20ecommerce's%20online%20store">
+                            <img src="/images/icons/arrow-long-right.svg" />
+                        </a>
+                    </span>
+                </p>
+            </div>
+            <div class="prompt-suggestion">
+                <p class="prompt-suggestion-title">Calculate</p>
+                <p class="prompt-suggestion-subtitle">
+                    a mathematical formula
+                    <span>
+                        <a href="/chat.html?prompt=Please%20calculate%20the%20square%20root%20of%2016">
+                            <img src="/images/icons/arrow-long-right.svg" />
+                        </a>
+                    </span>
+                </p>
+            </div>
+        </div>
+
+        <div class="prompt-suggestion-column">
+            <div class="prompt-suggestion">
+                <p class="prompt-suggestion-title">Generate a Fastify plugin</p>
+                <p class="prompt-suggestion-subtitle">
+                    that provides a route for users to sign up with
+                    <span>
+                        <a href="/chat.html?prompt=Please%20generate%20Typescript%20for%20a%20Fastify%20plugin%20that%20provides%20a%20basic%20user%20signin%20route.">
+                            <img src="/images/icons/arrow-long-right.svg" />
+                        </a>
+                    </span>
+                </p>
+            </div>
+
+            <div class="prompt-suggestion">
+                <p class="prompt-suggestion-title">Decode</p>
+                <p class="prompt-suggestion-subtitle">
+                    a base64 string
+                    <span>
+                        <a href="/chat.html?prompt=Please%20decode%20this%20base64%20string%3A%20SGVsbG8gV29ybGQ%3D">
+                            <img src="/images/icons/arrow-long-right.svg" />
+                        </a>
+                    </span>
+                </p>
+            </div>
+        </div>
+    </div>
 
-                    if (!line.startsWith('event: ')) {
-                        responseText.innerHTML = `Unexpected event type line: ${line}`
-                        return
-                    }
+    <div id="custom-prompt">
+        <input id="custom-prompt-input" type="text" placeholder="Enter your prompt to Platformatic Ai Warp" />
+        <button id="custom-prompt-button" type="button">
+            <img src="/images/icons/arrow-long-right.svg" />
+        </button>
+    </div>
 
-                    const dataLine = lines[i + 1]
-                    if (!dataLine.startsWith('data: ')) {
-                        responseText.innerHTML = `Unexpected data line: ${dataLine}`
-                        return
-                    }
+    <div id="bottom-links">
+        <a href="/documentation">View OpenAPI Documentation</a>
+    </div>
 
-                    const eventType = line.substring('event: '.length)
-                    const data = dataLine.substring('data: '.length)
-                    const json = JSON.parse(data)
-                    if (eventType === 'content') {
-                        const { response } = json
-                        responseText.innerHTML += response
-                    } else if (eventType === 'error') {
-                        const { message, code } = data
-                        responseText.innerHTML = `Error: ${message} (${code})`
-                    }
+    <script>
+        const promptInput = document.getElementById('custom-prompt-input')
+        const promptButton = document.getElementById('custom-prompt-button')
+        promptButton.onclick = () => {
+            if (promptInput.value !== '') {
+                document.location = `/chat.html?prompt=${encodeURIComponent(promptInput.value)}`
+            }
+        }
 
-                    i += 2
-                }
+        promptInput.onkeydown = (event) => {
+            if (event.key === 'Enter') {
+                promptButton.onclick()
             }
         }
     </script>