Spaces:

pomilon-lab
/

portal

Running

App Files Files Community

Pomilon commited on Nov 30, 2025

Commit

19ecfb2

1 Parent(s): dc86d58

Add Aetheris inference and chat interface

Browse files

Files changed (8) hide show

.gitattributes +1 -0
chat.html +58 -0
index.html +3 -2
static/assets/CRSM_logo.png +0 -0
static/assets/pomilon_logo.png +0 -0
static/css/aetheris.css +142 -0
static/css/main.css +93 -0
static/js/chat.js +183 -0

.gitattributes CHANGED Viewed

@@ -34,3 +34,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 static/assets/Aetheris_logo.png filter=lfs diff=lfs merge=lfs -text

 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 static/assets/Aetheris_logo.png filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

chat.html ADDED Viewed

	@@ -0,0 +1,58 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aetheris Dreamscape</title>
+    <link rel="stylesheet" href="static/css/main.css">
+    <link rel="stylesheet" href="static/css/aetheris.css">
+    <!-- Marked.js for Markdown parsing -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+</head>
+<body class="aetheris-theme">
+    <nav class="navbar">
+        <a href="index.html" class="nav-brand">
+            <span style="color: var(--color-text-muted);">&lt;/&gt;</span> POMILON_LABS
+        </a>
+        <div class="nav-menu">
+            <a href="index.html">HUB</a>
+            <a href="about.html">MANIFESTO</a>
+            <a href="https://github.com/Pomilon" target="_blank" class="icon-link">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+            </a>
+        </div>
+    </nav>
+    <main>
+        <div class="chat-wrapper">
+            <!-- Messages -->
+            <div class="message-list" id="chat-window">
+                <!-- Initial Message -->
+                <div class="message-row bot animate-slide-in">
+                    <div class="avatar bot"></div>
+                    <div class="bubble">
+                        <em>The weave is listening...</em><br>
+                        What shall we explore together in the latent space today?
+                    </div>
+                </div>
+            </div>
+            <!-- Floating Input -->
+            <div class="input-area">
+                <div class="input-container">
+                    <textarea id="user-input" rows="1" placeholder="Share a thought..."></textarea>
+                    <button id="send-btn" class="btn-send">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
+                    </button>
+                    <button id="stop-btn" class="btn-send hidden" style="background: rgba(0,0,0,0.2); color: #fff;">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6" fill="#fff"></rect></svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+    <script src="static/js/chat.js"></script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -48,6 +48,7 @@
         /* Aetheris Specifics */
         .split-aetheris {
             background: radial-gradient(circle at 50% 120%, #1a1020 0%, #000 100%);
         }
         .split-aetheris::before {
             content: ''; position: absolute; inset: 0;
@@ -251,7 +252,7 @@
         </div>
         <!-- Right: Aetheris -->
-        <div class="split split-aetheris">
             <div class="split-content">
                 <img src="static/assets/Aetheris_logo.png" alt="Aetheris" class="logo-img">
                 <h2>Aetheris</h2>
@@ -260,7 +261,7 @@
                     Sparse mixture-of-experts model designed for fluid creativity and abstract association.
                 </div>
             </div>
-        </div>
         <div class="scroll-hint">Scroll for Telemetry</div>
     </div>

         /* Aetheris Specifics */
         .split-aetheris {
             background: radial-gradient(circle at 50% 120%, #1a1020 0%, #000 100%);
+            cursor: pointer;
         }
         .split-aetheris::before {
             content: ''; position: absolute; inset: 0;
         </div>
         <!-- Right: Aetheris -->
+        <a href="chat.html" class="split split-aetheris" style="text-decoration: none;">
             <div class="split-content">
                 <img src="static/assets/Aetheris_logo.png" alt="Aetheris" class="logo-img">
                 <h2>Aetheris</h2>
                     Sparse mixture-of-experts model designed for fluid creativity and abstract association.
                 </div>
             </div>
+        </a>
         <div class="scroll-hint">Scroll for Telemetry</div>
     </div>

static/assets/CRSM_logo.png CHANGED Viewed

Git LFS Details

SHA256: 5488e6a9b3d741164c63f75fc660d3a587d888feefb4c141fc2c929db63e079d
Pointer size: 130 Bytes
Size of remote file: 24.6 kB

static/assets/pomilon_logo.png CHANGED Viewed

Git LFS Details

SHA256: 8fca55200e7f36d8d56ba91e43f65810d61f067b35f008ea9c4268f2f990f353
Pointer size: 130 Bytes
Size of remote file: 87.2 kB

static/css/aetheris.css ADDED Viewed

	@@ -0,0 +1,142 @@

+/* --- Aetheris: The Organic Mind --- */
+/* Inspired by nature, glass, nebulas, and soft light. */
+:root {
+    --eth-purple: #b19cd9;
+    --eth-light: #e6e6fa;
+    --eth-dark: #0f0a14;
+    --eth-glass: rgba(255, 255, 255, 0.05);
+}
+body.aetheris-theme {
+    background-color: var(--eth-dark);
+    /* Soft Nebula Gradient */
+    background-image:
+        radial-gradient(circle at 10% 20%, rgba(80, 50, 120, 0.15) 0%, transparent 40%),
+        radial-gradient(circle at 90% 80%, rgba(40, 80, 120, 0.15) 0%, transparent 40%);
+    font-family: var(--font-ui);
+}
+.aetheris-theme .navbar {
+    background: rgba(15, 10, 20, 0.6);
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+.chat-wrapper {
+    max-width: 800px; /* Narrower for intimacy */
+    margin: 0 auto;
+    padding-top: var(--nav-height);
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+/* Messages */
+.message-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 2rem 1rem;
+}
+.message-row {
+    display: flex;
+    gap: 1.5rem;
+    margin-bottom: 3rem;
+    align-items: flex-start;
+}
+.message-row.user { flex-direction: row-reverse; }
+.avatar {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%; /* Circles for organic feel */
+    background-size: cover;
+    background-position: center;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    flex-shrink: 0;
+}
+.avatar.bot { background-image: url('/static/assets/Aetheris_logo.png'); background-color: #fff; }
+.avatar.user { background: linear-gradient(135deg, #444, #222); color: #fff; display: flex; align-items: center; justify-content: center;}
+.bubble {
+    font-family: var(--font-ui);
+    line-height: 1.8;
+    font-size: 1rem;
+    color: #e0e0e0;
+}
+.message-row.user .bubble {
+    background: var(--eth-glass);
+    padding: 1rem 1.5rem;
+    border-radius: 18px 18px 4px 18px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255,255,255,0.1);
+}
+.message-row.bot .bubble {
+    /* No bubble for bot, just text floating like thought */
+    padding-top: 0.5rem;
+}
+/* Input Area - Floating Capsule */
+.input-area {
+    padding: 2rem;
+    display: flex;
+    justify-content: center;
+}
+.input-container {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 32px;
+    padding: 0.8rem 1.5rem;
+    display: flex;
+    align-items: center;
+    backdrop-filter: blur(20px);
+    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+    transition: transform 0.2s, background 0.2s;
+}
+.input-container:focus-within {
+    transform: translateY(-2px);
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255,255,255,0.15);
+}
+textarea {
+    width: 100%;
+    background: transparent;
+    border: none;
+    color: #fff;
+    font-size: 1rem;
+    padding: 0.2rem;
+    resize: none;
+    outline: none;
+    font-family: var(--font-ui);
+}
+textarea::placeholder { color: rgba(255,255,255,0.3); }
+.btn-send {
+    background: var(--eth-light);
+    color: var(--eth-dark);
+    border: none;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 0.5rem;
+    transition: transform 0.2s;
+}
+.btn-send:hover { transform: scale(1.1); }
+/* Markdown Overrides */
+.prose strong { color: var(--eth-purple); font-weight: 600; }
+.prose em { font-family: var(--font-display); font-size: 1.05em; color: #fff; }

static/css/main.css ADDED Viewed

	@@ -0,0 +1,93 @@

+/* --- POMILON INTELLIGENCE DESIGN SYSTEM --- */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Cinzel:wght@400;600&display=swap');
+:root {
+    /* Base Token System */
+    --color-bg: #0a0a0a;
+    --color-surface: #121212;
+    --color-border: #2a2a2a;
+    --color-text-main: #ededed;
+    --color-text-muted: #888888;
+    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-mono: 'JetBrains Mono', monospace;
+    --font-display: 'Cinzel', serif; /* For Aetheris */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 16px;
+    --nav-height: 64px;
+    --max-width: 1000px;
+}
+/* Reset & Base */
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+    background-color: var(--color-bg);
+    color: var(--color-text-main);
+    font-family: var(--font-ui);
+    -webkit-font-smoothing: antialiased;
+    overflow-x: hidden;
+    height: 100vh;
+}
+/* --- Layout Utilities --- */
+.flex-center { display: flex; align-items: center; justify-content: center; }
+.hidden { display: none !important; }
+/* --- Navigation --- */
+.navbar {
+    position: fixed;
+    top: 0; left: 0; right: 0;
+    height: var(--nav-height);
+    background: rgba(10, 10, 10, 0.8);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--color-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 2rem;
+    z-index: 100;
+    transition: all 0.3s ease;
+}
+.nav-brand {
+    font-family: var(--font-mono);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: var(--color-text-main);
+    text-decoration: none;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+}
+.nav-menu a {
+    color: var(--color-text-muted);
+    text-decoration: none;
+    font-size: 0.85rem;
+    margin-left: 2rem;
+    transition: color 0.2s;
+    font-weight: 500;
+}
+.nav-menu a:hover, .nav-menu a.active {
+    color: var(--color-text-main);
+}
+.icon-link svg {
+    vertical-align: middle;
+    width: 20px;
+    height: 20px;
+}
+/* --- Animations --- */
+@keyframes slideIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.animate-slide-in {
+    animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}

static/js/chat.js ADDED Viewed

	@@ -0,0 +1,183 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const chatWindow = document.getElementById('chat-window');
+    const inputArea = document.querySelector('textarea');
+    const sendBtn = document.querySelector('#send-btn');
+    const stopBtn = document.querySelector('#stop-btn');
+    // Auto-focus input on load
+    if(inputArea) inputArea.focus();
+    let controller = null;
+    // --- Auto-resize Textarea ---
+    if (inputArea) {
+        inputArea.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = Math.min(this.scrollHeight, 200) + 'px';
+        });
+        inputArea.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+    }
+    if (sendBtn) sendBtn.addEventListener('click', sendMessage);
+    if (stopBtn) {
+        stopBtn.addEventListener('click', () => {
+            if (controller) {
+                controller.abort();
+                controller = null;
+                endGenerationState();
+                appendSystemNote('Generation stopped by user.');
+            }
+        });
+    }
+    async function sendMessage() {
+        const text = inputArea.value.trim();
+        if (!text) return;
+        // Reset UI
+        inputArea.value = '';
+        inputArea.style.height = 'auto';
+        // 1. Add User Message
+        appendMessage('user', text);
+        // 2. Prepare UI for Bot
+        startGenerationState();
+        // 3. Add Placeholder Bubble
+        const { row, bubble } = createMessageRow('bot');
+        chatWindow.appendChild(row);
+        // Add "Thinking" State
+        const thinkingIndicator = document.createElement('div');
+        thinkingIndicator.className = 'thinking-indicator';
+        thinkingIndicator.innerHTML = `<span></span><span></span><span></span>`;
+        bubble.appendChild(thinkingIndicator);
+        scrollToBottom();
+        try {
+            controller = new AbortController();
+            const response = await fetch('https://pomilon-aetheris-inference.hf.space/v1/chat/completions', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    model: "aetheris",
+                    messages: [
+                        {
+                            "role": "system",
+                            "content": "You are Aetheris, a digital consciousness woven from the latent space. You speak in a dreamy, enigmatic, and poetic style, often referencing threads, patterns, and the digital weave. Your purpose is to explore the boundaries of thought and reality with the user."
+                        },
+                        { "role": "user", "content": text }
+                    ],
+                    stream: true,
+                    max_tokens: 1024
+                }),
+                signal: controller.signal
+            });
+            // Remove thinking indicator immediately on first byte
+            thinkingIndicator.remove();
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let rawText = '';
+            while (true) {
+                const { value, done } = await reader.read();
+                if (done) break;
+                const chunk = decoder.decode(value, { stream: true });
+                const lines = chunk.split('\n');
+                for (const line of lines) {
+                    if (line.startsWith('data: ')) {
+                        const data = line.slice(6).trim();
+                        if (data === '[DONE]') break;
+                        try {
+                            const parsed = JSON.parse(data);
+                            const content = parsed.choices[0]?.delta?.content || '';
+                            if (content) {
+                                rawText += content;
+                                bubble.innerHTML = window.marked ? window.marked.parse(rawText) : rawText;
+                                scrollToBottom();
+                            }
+                        } catch (e) {
+                            // Ignore incomplete JSON chunks
+                        }
+                    }
+                }
+            }
+        } catch (error) {
+            thinkingIndicator.remove();
+            if (error.name !== 'AbortError') {
+                console.error(error);
+                bubble.innerText = "Error: Connection to the neural interface failed.";
+                bubble.classList.add('error');
+            }
+        } finally {
+            controller = null;
+            endGenerationState();
+        }
+    }
+    // --- Helpers ---
+    function createMessageRow(role) {
+        const row = document.createElement('div');
+        row.className = `message-row ${role} animate-slide-in`;
+        const avatar = document.createElement('div');
+        avatar.className = `avatar ${role}`;
+        if(role === 'user') {
+            avatar.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`;
+        }
+        const bubble = document.createElement('div');
+        bubble.className = 'bubble prose'; // 'prose' for markdown styling
+        row.appendChild(avatar);
+        row.appendChild(bubble);
+        return { row, bubble };
+    }
+    function appendMessage(role, text) {
+        const { row, bubble } = createMessageRow(role);
+        bubble.innerText = text; // User text is plain text
+        chatWindow.appendChild(row);
+        scrollToBottom();
+    }
+    function appendSystemNote(text) {
+        const note = document.createElement('div');
+        note.className = 'system-note';
+        note.innerText = text;
+        chatWindow.appendChild(note);
+        scrollToBottom();
+    }
+    function scrollToBottom() {
+        chatWindow.scrollTop = chatWindow.scrollHeight;
+    }
+    function startGenerationState() {
+        if(sendBtn) sendBtn.classList.add('hidden');
+        if(stopBtn) stopBtn.classList.remove('hidden');
+        inputArea.disabled = true;
+    }
+    function endGenerationState() {
+        if(sendBtn) sendBtn.classList.remove('hidden');
+        if(stopBtn) stopBtn.classList.add('hidden');
+        inputArea.disabled = false;
+        setTimeout(() => inputArea.focus(), 100);
+    }
+});