Add designed index page

platformatic · May 8, 2024 · 22d1e90 · 22d1e90
1 parent 34df76a
commit 22d1e90
Show file tree

Hide file tree

Showing 15 changed files with 759 additions and 69 deletions.
diff --git a/static/chat.html b/static/chat.html
@@ -0,0 +1,44 @@
+<!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 class="message">
+            <div class="message-avatar">
+                <img src="/images/avatars/you.svg" alt="You" />
+            </div>
+            <div class="message-contents">
+                <p class="message-author">You</p>
+                <p>Lorem ipsum dolor sit amet consectetur. Nisi porta quam neque tortor at lorem eu non. Proin elit tristique.</p>
+            </div>
+        </div> -->
+    </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/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,84 +4,95 @@
     <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
-                }
-
-                const decodedValue = decoder.decode(value)
-                const lines = decodedValue.split('\n')
+    <div id="main-illustration">
+        <img src="/images/main-illustration.svg" alt="Main Illustration" />
+    </div>
 
-                let i = 0
-                while (i < lines.length) {
-                    const line = lines[i]
-                    if (line.length === 0) {
-                        i++
-                        continue
-                    }
+    <div id="greeting">
+        <h1>Welcome to</h1>
+        <h1>Platformatic Ai-Warp</h1>
+    </div>
 
-                    if (!line.startsWith('event: ')) {
-                        responseText.innerHTML = `Unexpected event type line: ${line}`
-                        return
-                    }
+    <div id="prompt-suggestions">
+        <div class="prompt-suggestion-column">
+            <div class="prompt-suggestion">
+                <p class="prompt-suggestion-title">Prompt suggestion 1</p>
+                <p class="prompt-suggestion-subtitle">
+                    Platformatic suggested prompt example 1
+                    <span>
+                        <a href="/chat.html?prompt=Prompt%20suggestion%201">
+                            <img src="/images/icons/arrow-long-right.svg" />
+                        </a>
+                    </span>
+                </p>
+            </div>
+            <div class="prompt-suggestion">
+                <p class="prompt-suggestion-title">Prompt suggestion 3</p>
+                <p class="prompt-suggestion-subtitle">
+                    Platformatic suggested prompt example 3
+                    <span>
+                        <a href="/chat.html?prompt=Prompt%20suggestion%203">
+                            <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">Prompt suggestion 2</p>
+                <p class="prompt-suggestion-subtitle">
+                    Platformatic suggested prompt example 2
+                    <span>
+                        <a href="/chat.html?prompt=Prompt%20suggestion%202">
+                            <img src="/images/icons/arrow-long-right.svg" />
+                        </a>
+                    </span>
+                </p>
+            </div>
+
+            <div class="prompt-suggestion">
+                <p class="prompt-suggestion-title">Prompt suggestion 4</p>
+                <p class="prompt-suggestion-subtitle">
+                    Platformatic suggested prompt example 4
+                    <span>
+                        <a href="/chat.html?prompt=Prompt%20suggestion%204">
+                            <img src="/images/icons/arrow-long-right.svg" />
+                        </a>
+                    </span>
+                </p>
+            </div>
+        </div>
+    </div>
 
-                    const dataLine = lines[i + 1]
-                    if (!dataLine.startsWith('data: ')) {
-                        responseText.innerHTML = `Unexpected data line: ${dataLine}`
-                        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 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})`
-                    }
+    <div id="see-docs">
+        <a href="/documentation">View OpenAPI Documentation</a>
+    </div>
 
-                    i += 2
-                }
-            }
+    <script>
+        const promptInput = document.getElementById('custom-prompt-input')
+        const promptButton = document.getElementById('custom-prompt-button')
+        promptButton.onclick = () => {
+            document.location = `/chat.html?prompt=${encodeURIComponent(promptInput.value)}`
         }
     </script>
 </body>