Spaces:

Lintottq
/

anycoder-36b47e50

Running

App Files Files Community

Lintottq commited on 22 days ago

Commit

d3bbabf

verified ·

1 Parent(s): d357c71

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +487 -19

index.html CHANGED Viewed

@@ -1,19 +1,487 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeStream | AI Code Generator</title>
+    <!-- Import Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Import Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-dark: #0f1117;
+            --bg-panel: #161b22;
+            --bg-editor: #0d1117;
+            --accent: #2f81f7;
+            --accent-glow: rgba(47, 129, 247, 0.4);
+            --text-main: #c9d1d9;
+            --text-muted: #8b949e;
+            --border: #30363d;
+            --syntax-keyword: #ff7b72;
+            --syntax-string: #a5d6ff;
+            --syntax-function: #d2a8ff;
+            --syntax-comment: #8b949e;
+            --terminal-bg: #010409;
+            --success: #238636;
+        }
+        * {
+            box-sizing: box-sizing;
+            margin: 0;
+            padding: 0;
+            scrollbar-width: thin;
+            scrollbar-color: var(--border) var(--bg-dark);
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        /* --- Header --- */
+        header {
+            height: 60px;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 20px;
+            background: var(--bg-panel);
+            z-index: 10;
+        }
+        .brand {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-weight: 700;
+            font-size: 1.1rem;
+            letter-spacing: -0.5px;
+        }
+        .brand i { color: var(--accent); }
+        .anycoder-link {
+            background: rgba(255, 255, 255, 0.05);
+            padding: 8px 16px;
+            border-radius: 6px;
+            text-decoration: none;
+            color: var(--text-main);
+            font-size: 0.85rem;
+            border: 1px solid var(--border);
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .anycoder-link:hover {
+            background: var(--accent);
+            border-color: var(--accent);
+            color: white;
+            box-shadow: 0 0 15px var(--accent-glow);
+        }
+        /* --- Main Layout --- */
+        .workspace {
+            display: grid;
+            grid-template-columns: 250px 1fr 350px;
+            flex-grow: 1;
+            height: 100%;
+        }
+        /* --- Sidebar --- */
+        .sidebar {
+            border-right: 1px solid var(--border);
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .file-tree-header {
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: var(--text-muted);
+            margin-bottom: 10px;
+        }
+        .file-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 8px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            color: var(--text-main);
+            font-size: 0.9rem;
+            transition: 0.2s;
+        }
+        .file-item:hover { background: rgba(255,255,255, 0.05); }
+        .file-item.active { background: rgba(47, 129, 247, 0.1); color: var(--accent); }
+        .file-item i { width: 20px; text-align: center; }
+        /* --- Editor Area --- */
+        .editor-container {
+            position: relative;
+            background: var(--bg-editor);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        .editor-tabs {
+            display: flex;
+            background: var(--bg-panel);
+            border-bottom: 1px solid var(--border);
+            height: 35px;
+        }
+        .tab {
+            padding: 0 15px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            border-right: 1px solid var(--border);
+            background: var(--bg-editor);
+            color: var(--text-main);
+        }
+        .tab i { color: #e34c26; } /* JS color */
+        .toolbar {
+            padding: 10px 20px;
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+        }
+        .btn {
+            padding: 6px 12px;
+            border-radius: 4px;
+            border: 1px solid var(--border);
+            background: transparent;
+            color: var(--text-main);
+            cursor: pointer;
+            font-size: 0.8rem;
+            transition: 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .btn-primary {
+            background: var(--success);
+            border-color: var(--success);
+            color: white;
+        }
+        .btn-primary:hover { opacity: 0.9; }
+        /* Code Editor Logic */
+        .code-area {
+            position: relative;
+            flex-grow: 1;
+            font-family: 'Fira Code', monospace;
+            font-size: 14px;
+            line-height: 1.6;
+            padding: 20px;
+            overflow: auto;
+        }
+        /* The textarea is transparent and sits on top */
+        #code-input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            padding: 20px;
+            background: transparent;
+            color: transparent; /* Text is invisible, we see the highlight layer */
+            caret-color: var(--accent);
+            border: none;
+            resize: none;
+            outline: none;
+            z-index: 2;
+            white-space: pre;
+            overflow: hidden;
+        }
+        /* The highlight layer sits behind */
+        #code-highlight {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            padding: 20px;
+            pointer-events: none;
+            z-index: 1;
+            white-space: pre;
+            overflow: hidden;
+            color: var(--text-main);
+        }
+        /* Syntax Highlighting Classes */
+        .keyword { color: var(--syntax-keyword); font-weight: bold; }
+        .string { color: var(--syntax-string); }
+        .function { color: var(--syntax-function); }
+        .comment { color: var(--syntax-comment); font-style: italic; }
+        /* --- Terminal/Preview --- */
+        .terminal-panel {
+            background: var(--terminal-bg);
+            border-left: 1px solid var(--border);
+            display: flex;
+            flex-direction: column;
+            font-family: 'Fira Code', monospace;
+        }
+        .terminal-header {
+            padding: 10px 20px;
+            border-bottom: 1px solid var(--border);
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            display: flex;
+            justify-content: space-between;
+        }
+        .terminal-content {
+            padding: 20px;
+            flex-grow: 1;
+            overflow-y: auto;
+            color: var(--text-main);
+            font-size: 0.85rem;
+        }
+        .log-entry {
+            margin-bottom: 10px;
+            display: flex;
+            gap: 10px;
+        }
+        .log-entry.error { color: var(--syntax-keyword); }
+        .log-entry.success { color: var(--success); }
+        .log-time { color: var(--text-muted); opacity: 0.5; }
+        .cursor-blink {
+            display: inline-block;
+            width: 8px;
+            height: 15px;
+            background: var(--accent);
+            animation: blink 1s infinite;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        /* Responsive */
+        @media (max-width: 900px) {
+            .workspace {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto 1fr 300px;
+            }
+            .sidebar { display: none; }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="brand">
+            <i class="fa-solid fa-code"></i>
+            <span>CodeStream</span>
+        </div>
+        <!-- CRITICAL LINK -->
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
+            <i class="fa-solid fa-robot"></i> Built with anycoder
+        </a>
+    </header>
+    <div class="workspace">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="file-tree-header">Explorer</div>
+            <div class="file-item active">
+                <i class="fa-brands fa-js"></i> main.js
+            </div>
+            <div class="file-item">
+                <i class="fa-brands fa-css3-alt"></i> styles.css
+            </div>
+            <div class="file-item">
+                <i class="fa-brands fa-html5"></i> index.html
+            </div>
+            <div class="file-item">
+                <i class="fa-solid fa-gear"></i> config.json
+            </div>
+        </aside>
+        <!-- Editor -->
+        <main class="editor-container">
+            <div class="editor-tabs">
+                <div class="tab"><i class="fa-brands fa-js"></i> main.js</div>
+            </div>
+            <div class="toolbar">
+                <button class="btn" onclick="clearTerminal()"><i class="fa-solid fa-trash"></i> Clear</button>
+                <button class="btn btn-primary" onclick="runCode()"><i class="fa-solid fa-play"></i> Run Code</button>
+            </div>
+            <div class="code-area">
+                <div id="code-highlight"></div>
+                <textarea id="code-input" spellcheck="false"></textarea>
+            </div>
+        </main>
+        <!-- Terminal -->
+        <aside class="terminal-panel">
+            <div class="terminal-header">
+                <span>Output Console</span>
+                <i class="fa-solid fa-terminal"></i>
+            </div>
+            <div class="terminal-content" id="terminal-output">
+                <div class="log-entry">
+                    <span class="log-time">System</span>
+                    <span>Ready for input...</span>
+                </div>
+            </div>
+        </aside>
+    </div>
+    <script>
+        const textarea = document.getElementById('code-input');
+        const highlight = document.getElementById('code-highlight');
+        const terminal = document.getElementById('terminal-output');
+        // Sample code to simulate "AI Generation"
+        const sampleCode = `// AI Code Generation Simulation
+// Initializing environment...
+const initSystem = () => {
+    console.log("System Booting...");
+    const modules = ['Core', 'UI', 'Logic'];
+    modules.forEach(m => {
+        loadModule(m);
+    });
+};
+const loadModule = (name) => {
+    // Simulating async load
+    return Promise.resolve(name);
+};
+// Execute
+initSystem();`;
+        // 1. Auto-Resize Textarea
+        textarea.addEventListener('input', () => {
+            textarea.style.height = 'auto';
+            textarea.style.height = textarea.scrollHeight + 'px';
+            highlightCode();
+        });
+        // 2. Syntax Highlighting Logic
+        function highlightCode() {
+            let text = textarea.value;
+            // Escape HTML
+            text = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+            // Regex for syntax highlighting (Simple implementation)
+            // Keywords
+            text = text.replace(/\b(const|let|var|function|return|if|else|for|while|import|from)\b/g, '<span class="keyword">$1</span>');
+            // Functions
+            text = text.replace(/\b(console\.log|initSystem|loadModule|forEach|resolve)\b/g, '<span class="function">$1</span>');
+            // Strings
+            text = text.replace(/(["'])(?:(?=(\\?))\2.)*?\1/g, '<span class="string">$&</span>');
+            // Comments
+            text = text.replace(/\/\/.*$/gm, '<span class="comment">$&</span>');
+            highlight.innerHTML = text;
+        }
+        // 3. Typing Effect (Simulate AI writing code)
+        let typeIndex = 0;
+        function typeCode() {
+            if (typeIndex < sampleCode.length) {
+                textarea.value += sampleCode.charAt(typeIndex);
+                textarea.style.height = 'auto';
+                textarea.style.height = textarea.scrollHeight + 'px';
+                highlightCode();
+                typeIndex++;
+                setTimeout(typeCode, 30 + Math.random() * 50); // Random typing speed
+            }
+        }
+        // 4. Terminal Logic
+        function logToTerminal(msg, type = 'normal') {
+            const entry = document.createElement('div');
+            entry.className = `log-entry ${type}`;
+            const time = new Date().toLocaleTimeString();
+            entry.innerHTML = `<span class="log-time">[${time}]</span> <span>${msg}</span>`;
+            terminal.appendChild(entry);
+            terminal.scrollTop = terminal.scrollHeight;
+        }
+        function clearTerminal() {
+            terminal.innerHTML = '';
+        }
+        // 5. Run Code Logic (Simulation)
+        function runCode() {
+            logToTerminal("Compiling...", "normal");
+            setTimeout(() => {
+                logToTerminal("Build successful.", "success");
+                // Try to actually execute the JS if it's safe/simple
+                try {
+                    // We use a safe wrapper to prevent breaking the UI
+                    const code = textarea.value;
+                    // Replace console.log to capture output
+                    const wrappedCode = code.replace(/console\.log/g, 'window.mockLog');
+                    window.mockLog = (arg) => {
+                        logToTerminal(`> ${arg}`, 'success');
+                    };
+                    // Create a function from the string
+                    const runFunc = new Function(wrappedCode);
+                    runFunc();
+                    logToTerminal("Process finished with exit code 0", "normal");
+                } catch (e) {
+                    logToTerminal(`Error: ${e.message}`, "error");
+                }
+            }, 800);
+        }
+        // Initialize
+        window.onload = () => {
+            // Start typing the code automatically when page loads
+            setTimeout(typeCode, 500);
+        };
+    </script>
+</body>
+</html>