undefined - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Visar Agent 0 1
-emoji: 🌍
+title: visar-agent-0-1
+emoji: 🐳
 colorFrom: red
-colorTo: indigo
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,273 @@
-<!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>VISAR Agent 0.1</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#f04a29',
+                        secondary: '#2F4F4F',
+                        accent: '#d932bd',
+                    },
+                    fontFamily: {
+                        sans: ['Space Grotesk', 'sans-serif'],
+                    },
+                    animation: {
+                        'pulse-glow': 'pulse-glow 2s infinite',
+                    },
+                    keyframes: {
+                        'pulse-glow': {
+                            '0%, 100%': { 'box-shadow': '0 0 5px #f04a29' },
+                            '50%': { 'box-shadow': '0 0 20px #f04a29' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .glow-effect {
+            transition: all 0.3s ease;
+        }
+        .glow-effect:hover {
+            box-shadow: 0 0 15px #d932bd;
+        }
+        .neon-text {
+            text-shadow: 0 0 5px #f04a29, 0 0 10px #f04a29;
+        }
+        .code-block {
+            background-color: #1a2a2a;
+            border-left: 3px solid #f04a29;
+        }
+        .language-selector {
+            background-color: #2F4F4F;
+            border: 1px solid #f04a29;
+        }
+        .language-selector:hover {
+            background-color: #3a5f5f;
+        }
+        .loading-dots::after {
+            content: '.';
+            animation: dots 1.5s steps(5, end) infinite;
+        }
+        @keyframes dots {
+            0%, 20% { content: '.'; }
+            40% { content: '..'; }
+            60% { content: '...'; }
+            80%, 100% { content: ''; }
+        }
+    </style>
+</head>
+<body class="bg-secondary font-sans text-white min-h-screen flex flex-col">
+    <div class="container mx-auto p-4 max-w-md">
+        <!-- Header -->
+        <header class="mb-6 text-center">
+            <h1 class="text-2xl font-bold neon-text mb-2">VISAR Agent 0.1</h1>
+            <p class="text-accent text-sm">Your AI coding assistant</p>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-1">
+            <!-- API Key Input -->
+            <div class="mb-4 bg-gray-800 p-3 rounded-lg">
+                <label for="apiKey" class="block text-sm font-medium mb-1">Gemini API Key</label>
+                <div class="flex">
+                    <input type="password" id="apiKey" placeholder="Enter your API key" 
+                           class="flex-1 bg-gray-700 border border-gray-600 rounded-l px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-accent">
+                    <button id="saveKeyBtn" class="bg-primary hover:bg-opacity-90 px-3 py-2 rounded-r text-sm glow-effect">
+                        <i class="fas fa-save"></i>
+                    </button>
+                </div>
+                <p class="text-xs mt-1 text-gray-400">Or pass via URL: ?key=YOUR_API_KEY</p>
+            </div>
+
+            <!-- Language Selector -->
+            <div class="mb-4">
+                <label for="language" class="block text-sm font-medium mb-1">Programming Language</label>
+                <select id="language" class="w-full language-selector rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-accent">
+                    <option value="python">Python</option>
+                    <option value="javascript">JavaScript</option>
+                    <option value="java">Java</option>
+                    <option value="csharp">C#</option>
+                    <option value="cpp">C++</option>
+                    <option value="php">PHP</option>
+                    <option value="ruby">Ruby</option>
+                    <option value="swift">Swift</option>
+                    <option value="go">Go</option>
+                    <option value="rust">Rust</option>
+                </select>
+            </div>
+
+            <!-- Query Input -->
+            <div class="mb-4">
+                <label for="query" class="block text-sm font-medium mb-1">What do you need?</label>
+                <textarea id="query" rows="3" placeholder="Describe the code you want to generate..." 
+                          class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-accent"></textarea>
+            </div>
+
+            <!-- Generate Button -->
+            <button id="generateBtn" class="w-full bg-accent hover:bg-opacity-90 py-2 px-4 rounded font-medium mb-4 glow-effect animate-pulse-glow">
+                <i class="fas fa-bolt mr-2"></i> Generate Code
+            </button>
+
+            <!-- Result Area -->
+            <div class="mb-4">
+                <div class="flex justify-between items-center mb-1">
+                    <label class="text-sm font-medium">Generated Code</label>
+                    <button id="copyBtn" class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded glow-effect" disabled>
+                        <i class="fas fa-copy mr-1"></i> Copy
+                    </button>
+                </div>
+                <div id="result" class="code-block p-3 rounded text-sm overflow-auto max-h-60">
+                    <p class="text-gray-400">Your generated code will appear here...</p>
+                </div>
+                <div id="loading" class="hidden text-center py-4 text-accent">
+                    <p>Generating<span class="loading-dots"></span></p>
+                </div>
+            </div>
+        </main>
+
+        <!-- Footer -->
+        <footer class="text-center text-xs text-gray-400 mt-6">
+            <p>Powered by Gemini AI</p>
+            <p class="mt-1">VISAR Agent 0.1</p>
+        </footer>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Check for API key in URL
+            const urlParams = new URLSearchParams(window.location.search);
+            const apiKeyFromUrl = urlParams.get('key');
+            
+            if (apiKeyFromUrl) {
+                document.getElementById('apiKey').value = apiKeyFromUrl;
+                localStorage.setItem('geminiApiKey', apiKeyFromUrl);
+            } else {
+                // Load saved API key from localStorage
+                const savedKey = localStorage.getItem('geminiApiKey');
+                if (savedKey) {
+                    document.getElementById('apiKey').value = savedKey;
+                }
+            }
+            
+            // Save API key button
+            document.getElementById('saveKeyBtn').addEventListener('click', function() {
+                const apiKey = document.getElementById('apiKey').value;
+                if (apiKey) {
+                    localStorage.setItem('geminiApiKey', apiKey);
+                    alert('API key saved!');
+                } else {
+                    alert('Please enter an API key');
+                }
+            });
+            
+            // Generate button
+            document.getElementById('generateBtn').addEventListener('click', function() {
+                const apiKey = document.getElementById('apiKey').value;
+                const language = document.getElementById('language').value;
+                const query = document.getElementById('query').value;
+                
+                if (!apiKey) {
+                    alert('Please enter your Gemini API key');
+                    return;
+                }
+                
+                if (!query) {
+                    alert('Please describe what code you want to generate');
+                    return;
+                }
+                
+                generateCode(apiKey, language, query);
+            });
+            
+            // Copy button
+            document.getElementById('copyBtn').addEventListener('click', function() {
+                const codeElement = document.getElementById('result').querySelector('code');
+                if (codeElement) {
+                    navigator.clipboard.writeText(codeElement.textContent)
+                        .then(() => {
+                            const copyBtn = document.getElementById('copyBtn');
+                            copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!';
+                            setTimeout(() => {
+                                copyBtn.innerHTML = '<i class="fas fa-copy mr-1"></i> Copy';
+                            }, 2000);
+                        })
+                        .catch(err => {
+                            console.error('Failed to copy: ', err);
+                        });
+                }
+            });
+            
+            // Function to generate code (mock implementation - in a real app, you'd call the Gemini API)
+            function generateCode(apiKey, language, query) {
+                const resultDiv = document.getElementById('result');
+                const loadingDiv = document.getElementById('loading');
+                const copyBtn = document.getElementById('copyBtn');
+                
+                // Show loading state
+                resultDiv.classList.add('hidden');
+                loadingDiv.classList.remove('hidden');
+                copyBtn.disabled = true;
+                
+                // Simulate API call delay
+                setTimeout(() => {
+                    // Hide loading state
+                    loadingDiv.classList.add('hidden');
+                    resultDiv.classList.remove('hidden');
+                    
+                    // Mock response - in a real app, this would be the actual API response
+                    const mockResponses = {
+                        python: `# ${query}\ndef solution():\n    # Your code here\n    return "Hello, World!"`,
+                        javascript: `// ${query}\nfunction solution() {\n  // Your code here\n  return "Hello, World!";\n}`,
+                        java: `// ${query}\npublic class Solution {\n    public static void main(String[] args) {\n        // Your code here\n        System.out.println("Hello, World!");\n    }\n}`,
+                        csharp: `// ${query}\nusing System;\n\nclass Program {\n    static void Main() {\n        // Your code here\n        Console.WriteLine("Hello, World!");\n    }\n}`,
+                        cpp: `// ${query}\n#include <iostream>\n\nint main() {\n    // Your code here\n    std::cout << "Hello, World!";\n    return 0;\n}`,
+                        php: `<?php\n// ${query}\nfunction solution() {\n    // Your code here\n    return "Hello, World!";\n}\n?>`,
+                        ruby: `# ${query}\ndef solution\n  # Your code here\n  "Hello, World!"\nend`,
+                        swift: `// ${query\nfunc solution() -> String {\n    // Your code here\n    return "Hello, World!"\n}`,
+                        go: `// ${query}\npackage main\n\nimport "fmt"\n\nfunc main() {\n    // Your code here\n    fmt.Println("Hello, World!")\n}`,
+                        rust: `// ${query}\nfn main() {\n    // Your code here\n    println!("Hello, World!");\n}`
+                    };
+                    
+                    const code = mockResponses[language] || mockResponses['python'];
+                    resultDiv.innerHTML = `<pre><code class="language-${language}">${code}</code></pre>`;
+                    copyBtn.disabled = false;
+                    
+                    // Add syntax highlighting (in a real app, you might use a library like Prism.js)
+                    resultDiv.querySelector('code').style.color = '#f8f8f2';
+                }, 1500);
+            }
+            
+            // In a real implementation, you would have a function to call the actual Gemini API
+            // async function callGeminiAPI(apiKey, prompt) {
+            //     const response = await fetch('https://api.gemini.ai/v1/generate', {
+            //         method: 'POST',
+            //         headers: {
+            //             'Content-Type': 'application/json',
+            //             'Authorization': `Bearer ${apiKey}`
+            //         },
+            //         body: JSON.stringify({
+            //             prompt: prompt,
+            //             max_tokens: 1000,
+            //             temperature: 0.7
+            //         })
+            //     });
+            //     
+            //     if (!response.ok) {
+            //         throw new Error('API request failed');
+            //     }
+            //     
+            //     return await response.json();
+            // }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=RootDeveloperDS/visar-agent-0-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>