aji/widuri-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First Commit

Browse Source
This commit is contained in:
Dita Aji Pratama 2025-05-16 22:34:27 +07:00
commit 96595c62bc
6 changed files with 429 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
css/alien.css Normal file
View File

@ -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;
}

111
css/modern.css Normal file
View File

@ -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;
}

1
css/plain.css Normal file
View File

@ -0,0 +1 @@
/* empty */

131
css/synthwave.css Normal file
View File

@ -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;
}

49
generate.js Normal file
View File

@ -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);
}
}
}
}
}

17
index.html Normal file
View File

@ -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>