From 96595c62bc0840542781f34922afa0328afc490f Mon Sep 17 00:00:00 2001
From: Dita Aji Pratama <ditaajipratama@protonmail.com>
Date: Fri, 16 May 2025 22:34:27 +0700
Subject: [PATCH] First Commit

---
 css/alien.css     | 120 ++++++++++++++++++++++++++++++++++++++++++
 css/modern.css    | 111 +++++++++++++++++++++++++++++++++++++++
 css/plain.css     |   1 +
 css/synthwave.css | 131 ++++++++++++++++++++++++++++++++++++++++++++++
 generate.js       |  49 +++++++++++++++++
 index.html        |  17 ++++++
 6 files changed, 429 insertions(+)
 create mode 100644 css/alien.css
 create mode 100644 css/modern.css
 create mode 100644 css/plain.css
 create mode 100644 css/synthwave.css
 create mode 100644 generate.js
 create mode 100644 index.html

diff --git a/css/alien.css b/css/alien.css
new file mode 100644
index 0000000..d0fc209
--- /dev/null
+++ b/css/alien.css
@@ -0,0 +1,120 @@
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
+
+/* Body setup */
+body {
+  font-family: 'Share Tech Mono', monospace;
+  background: radial-gradient(circle at center, #020d0d 0%, #000000 100%);
+  color: #d1ffd1;
+  margin: 0;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color:#000000;
+  background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
+}
+
+/* Title */
+.title {
+  font-size: 2.2rem;
+  font-weight: bold;
+  color: #7fff00;
+  text-shadow: 0 0 10px #7fff00, 0 0 30px #39ff14;
+  margin-bottom: 1.5rem;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+/* Form / Textarea */
+.form {
+  width: 100%;
+  max-width: 700px;
+  min-height: 150px;
+  background: #001a0f;
+  border: 1px solid #39ff14;
+  border-radius: 10px;
+  padding: 1rem;
+  color: #d1ffd1;
+  font-size: 1rem;
+  resize: vertical;
+  box-shadow: 0 0 10px #39ff1444;
+  transition: box-shadow 0.3s ease, border 0.3s;
+}
+
+.form:focus {
+  outline: none;
+  border-color: #9fff3f;
+  box-shadow: 0 0 20px #7fff00aa;
+}
+
+/* Button */
+.button {
+  background: linear-gradient(45deg, #39ff14, #00cc66);
+  color: #000;
+  border: none;
+  padding: 0.8rem 1.5rem;
+  font-size: 1rem;
+  font-weight: bold;
+  border-radius: 10px;
+  margin-top: 1rem;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.3s ease;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0 12px #39ff14aa;
+}
+
+.button:disabled {
+  background: #333;
+  color: #888;
+  cursor: not-allowed;
+}
+
+/* Status */
+.status {
+  margin-top: 1rem;
+  font-size: 0.95rem;
+  font-style: italic;
+  color: #aaffaa;
+}
+
+.status.loading {
+  color: #ffff00;
+  animation: flicker 1s infinite;
+}
+
+.status.generate {
+  color: #39ff14;
+}
+
+.status.done {
+  color: #00ffcc;
+}
+
+/* Flicker animation */
+@keyframes flicker {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* Response */
+.response {
+  width: 100%;
+  max-width: 700px;
+  background: #001a0f;
+  border: 2px solid #39ff14;
+  border-radius: 10px;
+  margin-top: 2rem;
+  padding: 1rem;
+  color: #ccffe6;
+  font-family: 'Courier New', Courier, monospace;
+  white-space: pre-wrap;
+  line-height: 1.5;
+  box-shadow: 0 0 15px #39ff1455;
+  max-height: 400px;
+  overflow-y: auto;
+}
diff --git a/css/modern.css b/css/modern.css
new file mode 100644
index 0000000..aeb9e31
--- /dev/null
+++ b/css/modern.css
@@ -0,0 +1,111 @@
+/* Base styling */
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: #0e0e10;
+  color: #f0f0f0;
+  margin: 0;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Title */
+.title {
+  font-size: 2rem;
+  font-weight: bold;
+  color: #00ffd5;
+  margin-bottom: 1.5rem;
+  text-shadow: 0 0 10px rgba(0, 255, 213, 0.7);
+}
+
+/* Form / Textarea */
+.form {
+  width: 100%;
+  max-width: 700px;
+  min-height: 150px;
+  background: #1c1c1f;
+  border: 1px solid #333;
+  border-radius: 10px;
+  padding: 1rem;
+  color: #fff;
+  font-size: 1rem;
+  resize: vertical;
+  transition: border 0.3s ease, box-shadow 0.3s ease;
+}
+
+.form:focus {
+  outline: none;
+  border-color: #00ffd5;
+  box-shadow: 0 0 12px #00ffd5aa;
+}
+
+/* Submit Button */
+.button {
+  background: linear-gradient(to right, #00ffd5, #007cff);
+  color: #000;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-weight: bold;
+  font-size: 1rem;
+  cursor: pointer;
+  margin-top: 1rem;
+  transition: transform 0.2s ease, box-shadow 0.3s ease;
+}
+
+.button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0, 255, 213, 0.3);
+}
+
+.button:disabled {
+  background: #444;
+  color: #aaa;
+  cursor: not-allowed;
+}
+
+/* Status Indicator */
+.status {
+  margin-top: 1rem;
+  font-size: 0.9rem;
+  font-style: italic;
+  color: #888;
+}
+
+.status.loading {
+  color: #ffc107;
+}
+
+.status.generate {
+  color: #00bcd4;
+}
+
+.status.done {
+  color: #4caf50;
+}
+
+/* Response Output */
+.response {
+  width: 100%;
+  max-width: 700px;
+  background: #121212;
+  border-left: 4px solid #00ffd5;
+  border-radius: 8px;
+  margin-top: 1.5rem;
+  padding: 1rem;
+  white-space: pre-wrap;
+  font-family: 'Courier New', Courier, monospace;
+  line-height: 1.6;
+  box-shadow: 0 0 12px rgba(0, 255, 213, 0.05);
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.2; }
+}
+
+.status.loading::after {
+  content: " ⏳";
+  animation: blink 1s infinite;
+}
diff --git a/css/plain.css b/css/plain.css
new file mode 100644
index 0000000..40a8c17
--- /dev/null
+++ b/css/plain.css
@@ -0,0 +1 @@
+/* empty */
diff --git a/css/synthwave.css b/css/synthwave.css
new file mode 100644
index 0000000..9f1d523
--- /dev/null
+++ b/css/synthwave.css
@@ -0,0 +1,131 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');
+
+/* Base styling */
+body {
+  font-family: 'Orbitron', sans-serif;
+  background: linear-gradient(135deg, #0d001a, #1a0033);
+  color: #f0f0f0;
+  margin: 0;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Title */
+.title {
+  font-size: 2.5rem;
+  font-weight: bold;
+  color: #ff00ff;
+  text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px #ff0080;
+  margin-bottom: 2rem;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+
+/* Form / Textarea */
+.form {
+  width: 100%;
+  max-width: 700px;
+  min-height: 160px;
+  background: #1a0033;
+  border: 2px solid #00ffff;
+  border-radius: 12px;
+  padding: 1rem;
+  color: #fff;
+  font-size: 1rem;
+  resize: vertical;
+  box-shadow: 0 0 10px #00ffff44;
+  transition: border 0.3s, box-shadow 0.3s;
+}
+
+.form:focus {
+  outline: none;
+  border-color: #ff00ff;
+  box-shadow: 0 0 16px #ff00ff99;
+}
+
+/* Button */
+.button {
+  background: linear-gradient(45deg, #ff00ff, #00ffff);
+  color: #000;
+  border: none;
+  padding: 0.9rem 2rem;
+  font-size: 1rem;
+  font-weight: bold;
+  border-radius: 10px;
+  margin-top: 1rem;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.3s ease;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 0 15px #ff00ff, 0 0 25px #00ffff;
+}
+
+.button:disabled {
+  background: #444;
+  color: #999;
+  cursor: not-allowed;
+}
+
+/* Status */
+.status {
+  margin-top: 1rem;
+  font-size: 0.95rem;
+  font-style: italic;
+  color: #cccccc;
+}
+
+.status.loading {
+  color: #ffc107;
+  animation: pulse 1s infinite;
+}
+
+.status.generate {
+  color: #00ffff;
+}
+
+.status.done {
+  color: #7fff00;
+}
+
+/* Loading animation */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* Response */
+.response {
+  width: 100%;
+  max-width: 700px;
+  background: #1a0033;
+  border: 2px solid #ff00ff;
+  border-radius: 12px;
+  margin-top: 2rem;
+  padding: 1rem;
+  white-space: pre-wrap;
+  color: #00ffea;
+  font-family: 'Courier New', Courier, monospace;
+  line-height: 1.6;
+  box-shadow: 0 0 15px #ff00ff55;
+  overflow-y: auto;
+  max-height: 400px;
+}
+
+@keyframes glitch {
+  0% { text-shadow: 2px 0 magenta, -2px 0 cyan; }
+  20% { text-shadow: -2px 0 magenta, 2px 0 cyan; }
+  40% { text-shadow: 2px 2px magenta, -2px -2px cyan; }
+  60% { text-shadow: -2px -2px magenta, 2px 2px cyan; }
+  80% { text-shadow: 0 0 magenta, 0 0 cyan; }
+  100% { text-shadow: 2px 0 magenta, -2px 0 cyan; }
+}
+
+.title {
+  animation: glitch 2s infinite;
+}
diff --git a/generate.js b/generate.js
new file mode 100644
index 0000000..f70c9d0
--- /dev/null
+++ b/generate.js
@@ -0,0 +1,49 @@
+async function sendPrompt() {
+    document.getElementById("status").classList.remove("generate");
+    document.getElementById("status").classList.remove("done");
+    document.getElementById("status").classList.add("loading");
+    document.getElementById("status").innerText = "Loading";
+    const prompt      = document.getElementById("prompt"   ).value;
+    const responseDiv = document.getElementById("response" );
+    responseDiv.textContent = "";
+    const response = await fetch("http://localhost:11434/api/generate", {
+        method  : "POST",
+        headers : { "Content-Type": "application/json" },
+        body    : JSON.stringify({
+            model  : "deepseek-v2:16b",
+            prompt : prompt,
+            stream : true
+        })
+    });
+    const reader  = response.body.getReader();
+    const decoder = new TextDecoder("utf-8");
+    document.getElementById("status").classList.remove("loading");
+    document.getElementById("status").classList.remove("done");
+    document.getElementById("status").classList.add("generate");
+    document.getElementById("status").innerText = "Generate";
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+            document.getElementById("status").classList.remove("loading");
+            document.getElementById("status").classList.remove("generate");
+            document.getElementById("status").classList.add("done");
+            document.getElementById("status").innerText = "Done";
+            break;
+        }
+        const chunk = decoder.decode(value, { stream: true });
+        const lines = chunk.trim().split("\n");
+        for (const line of lines) {
+            if (line) {
+                try {
+                    const json = JSON.parse(line);
+                    if (json.response) {
+                        responseDiv.textContent += json.response;
+                    }
+                }
+                catch (e) {
+                    console.warn("Failed:", line);
+                }
+            }
+        }
+    }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b5335a8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Widuri AI</title>
+    <link rel="stylesheet" href="css/alien.css">
+  </head>
+  <body>
+    <h1        class="title"     >Widuri AI</h1>
+    <textarea  class="form"      id="prompt"></textarea> <br>
+    <button    class="button"    onclick="sendPrompt()">Send</button>
+    <span      class="status"    id="status"></span>
+    <div       class="response"  id="response"></div>
+    <script src="generate.js"></script>
+  </body>
+</html>