Lets-Vibe-CodeOnChain

Running

App Files Files Community

arpit13 commited on Apr 29, 2025

Commit

57d24a3

verified ·

1 Parent(s): a32c269

Update index.html

Browse files

Files changed (1) hide show

index.html +188 -23

index.html CHANGED Viewed

@@ -162,6 +162,42 @@
             border-left: none;
             border-top: none;
         }
     </style>
 </head>
 <body class="scanlines min-h-screen">
@@ -195,7 +231,7 @@
             </div>
             <!-- Terminal Content -->
-            <div class="p-4 h-96 overflow-y-auto terminal-font text-green-200">
                 <div class="mb-4">
                     <span class="neon-purple">user@vibecode:~$</span> <span class="neon-green">welcome to Vibecode</span>
                 </div>
@@ -285,7 +321,7 @@
                 <a href="#" class="mx-2 hover:text-neon-green transition-all">Discord</a>
                 <a href="#" class="mx-2 hover:text-neon-green transition-all">GitHub</a>
             </div>
-            <p>Vibecode © 2023 | Onchain Replit with Vibes</p>
         </footer>
     </div>
@@ -294,6 +330,11 @@
             const userInput = document.getElementById('user-input');
             const sendBtn = document.getElementById('send-btn');
             const chatMessages = document.getElementById('chat-messages');
             // Typing animation for the terminal prompt
             const typingElement = document.querySelector('.typing');
@@ -340,14 +381,29 @@
                     // Add user message
                     addMessage(message, 'user');
-                    // Simulate AI response
-                    setTimeout(() => {
-                        const response = generateAIResponse(message);
-                        addMessage(response, 'ai');
-                        // Scroll to bottom
-                        chatMessages.scrollTop = chatMessages.scrollHeight;
-                    }, 1000);
                     // Clear input
                     userInput.value = '';
@@ -364,26 +420,135 @@
                         ? 'bg-neon-green/10 border border-neon-green/30 text-neon-green'
                         : 'bg-gray-800/50 border border-neon-purple/30 text-gray-300'
                 }`;
-                bubble.textContent = text;
                 messageDiv.appendChild(bubble);
                 chatMessages.appendChild(messageDiv);
                 // Scroll to bottom
-                chatMessages.scrollTop = chatMessages.scrollHeight;
             }
-            function generateAIResponse(message) {
-                // Simple response logic - in a real app this would call an API
-                const responses = [
-                    `Processing your request: "${message}"...`,
-                    `Generating smart contract for: ${message}`,
-                    `Compiling deployment package for: ${message}`,
-                    `Setting up Uniswap LP for: ${message}`,
-                    `Deploying frontend UI for: ${message}`
-                ];
-                return responses[Math.floor(Math.random() * responses.length)];
             }
             // Event listeners
@@ -395,5 +560,5 @@
             });
         });
     </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=karhar92/astrology4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

             border-left: none;
             border-top: none;
         }
+        .loading-dots:after {
+            content: '...';
+            animation: dots 1.5s steps(5, end) infinite;
+            display: inline-block;
+            width: 0;
+            overflow: hidden;
+            vertical-align: bottom;
+        }
+        @keyframes dots {
+            0%, 20% { width: 0; }
+            40% { width: 0.2em; }
+            60% { width: 0.4em; }
+            80% { width: 0.6em; }
+            100% { width: 0; }
+        }
+        /* Code syntax highlighting */
+        .code-snippet {
+            background-color: rgba(0,0,0,0.4);
+            padding: 12px;
+            border-radius: 4px;
+            border-left: 3px solid var(--neon-green);
+            font-family: 'IBM Plex Mono', monospace;
+            font-size: 0.9em;
+            overflow-x: auto;
+            margin: 10px 0;
+        }
+        .code-keyword { color: #ff79c6; }
+        .code-string { color: #f1fa8c; }
+        .code-comment { color: #6272a4; }
+        .code-function { color: #50fa7b; }
+        .code-variable { color: #8be9fd; }
+        .code-number { color: #bd93f9; }
     </style>
 </head>
 <body class="scanlines min-h-screen">
             </div>
             <!-- Terminal Content -->
+            <div class="p-4 h-96 overflow-y-auto terminal-font text-green-200" id="terminal-content">
                 <div class="mb-4">
                     <span class="neon-purple">user@vibecode:~$</span> <span class="neon-green">welcome to Vibecode</span>
                 </div>
                 <a href="#" class="mx-2 hover:text-neon-green transition-all">Discord</a>
                 <a href="#" class="mx-2 hover:text-neon-green transition-all">GitHub</a>
             </div>
+            <p>Vibecode © 2025 | Onchain Replit with Vibes</p>
         </footer>
     </div>
             const userInput = document.getElementById('user-input');
             const sendBtn = document.getElementById('send-btn');
             const chatMessages = document.getElementById('chat-messages');
+            const terminalContent = document.getElementById('terminal-content');
+            // Gemini API Key
+            const GEMINI_API_KEY = "AIzaSyAX_-SVl0NpZ8Iv8mlkJ3olLbgxs_fTyGw";
+            const GEMINI_API_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent";
             // Typing animation for the terminal prompt
             const typingElement = document.querySelector('.typing');
                     // Add user message
                     addMessage(message, 'user');
+                    // Add loading indicator
+                    const loadingId = addLoadingIndicator();
+                    // Call Gemini API
+                    callGeminiAPI(message)
+                        .then(response => {
+                            // Remove loading indicator
+                            removeLoadingIndicator(loadingId);
+                            // Add AI response
+                            addMessage(formatResponse(response, message), 'ai');
+                            // Scroll to bottom
+                            terminalContent.scrollTop = terminalContent.scrollHeight;
+                        })
+                        .catch(error => {
+                            // Remove loading indicator
+                            removeLoadingIndicator(loadingId);
+                            // Add error message
+                            addMessage("Error processing your request. Please try again.", 'ai');
+                            console.error("Gemini API Error:", error);
+                        });
                     // Clear input
                     userInput.value = '';
                         ? 'bg-neon-green/10 border border-neon-green/30 text-neon-green'
                         : 'bg-gray-800/50 border border-neon-purple/30 text-gray-300'
                 }`;
+                // Format the response with code highlighting if it contains code
+                if (sender === 'ai' && text.includes('```')) {
+                    const formattedText = formatCodeBlocks(text);
+                    bubble.innerHTML = formattedText;
+                } else {
+                    bubble.textContent = text;
+                }
                 messageDiv.appendChild(bubble);
                 chatMessages.appendChild(messageDiv);
                 // Scroll to bottom
+                terminalContent.scrollTop = terminalContent.scrollHeight;
             }
+            function addLoadingIndicator() {
+                const loadingId = 'loading-' + Date.now();
+                const loadingDiv = document.createElement('div');
+                loadingDiv.id = loadingId;
+                loadingDiv.className = 'flex justify-start';
+                const loadingBubble = document.createElement('div');
+                loadingBubble.className = 'terminal-font rounded px-4 py-2 bg-gray-800/50 border border-neon-purple/30 text-gray-300';
+                const loadingText = document.createElement('span');
+                loadingText.className = 'loading-dots';
+                loadingText.textContent = 'Generating smart contract';
+                loadingBubble.appendChild(loadingText);
+                loadingDiv.appendChild(loadingBubble);
+                chatMessages.appendChild(loadingDiv);
+                // Scroll to bottom
+                terminalContent.scrollTop = terminalContent.scrollHeight;
+                return loadingId;
+            }
+            function removeLoadingIndicator(loadingId) {
+                const loadingElement = document.getElementById(loadingId);
+                if (loadingElement) {
+                    loadingElement.remove();
+                }
+            }
+            async function callGeminiAPI(message) {
+                // Construct prompt for blockchain context
+                const blockchainPrompt = `You are Vibecode AI, an expert in blockchain development and smart contract creation.
+                The user will give you a request related to creating tokens, NFTs, DAOs, or other blockchain applications.
+                Please respond with:
+                1. An explanation of what you'll create based on their request
+                2. The appropriate smart contract code (Solidity) to implement their request
+                3. Clear deployment instructions
+                Current user request: "${message}"`;
+                try {
+                    const response = await fetch(`${GEMINI_API_URL}?key=${GEMINI_API_KEY}`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            contents: [{
+                                parts: [{
+                                    text: blockchainPrompt
+                                }]
+                            }]
+                        })
+                    });
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    const data = await response.json();
+                    // Extract the text from the response
+                    if (data.candidates &&
+                        data.candidates[0] &&
+                        data.candidates[0].content &&
+                        data.candidates[0].content.parts &&
+                        data.candidates[0].content.parts[0]) {
+                        return data.candidates[0].content.parts[0].text;
+                    } else {
+                        throw new Error("Unexpected response format from Gemini API");
+                    }
+                } catch (error) {
+                    console.error("Error calling Gemini API:", error);
+                    throw error;
+                }
+            }
+            function formatResponse(response, userRequest) {
+                // You can customize the formatting of the AI response here
+                return response;
+            }
+            function formatCodeBlocks(text) {
+                // Split the text by code blocks
+                const parts = text.split('```');
+                let result = '';
+                for (let i = 0; i < parts.length; i++) {
+                    if (i % 2 === 0) {
+                        // Regular text
+                        result += parts[i];
+                    } else {
+                        // Code block
+                        const codeLines = parts[i].split('\n');
+                        const language = codeLines[0] || '';
+                        const code = codeLines.slice(1).join('\n');
+                        // Basic syntax highlighting for Solidity
+                        let highlightedCode = code
+                            .replace(/\b(contract|function|address|uint|string|bytes|mapping|struct|enum|bool|public|private|internal|external|view|pure|returns|memory|storage|calldata)\b/g, '<span class="code-keyword">$1</span>')
+                            .replace(/(\/\/.*)/g, '<span class="code-comment">$1</span>')
+                            .replace(/"([^"]*)"/g, '<span class="code-string">"$1"</span>')
+                            .replace(/\b(\d+)\b/g, '<span class="code-number">$1</span>')
+                            .replace(/\b(constructor|require|assert|emit)\b/g, '<span class="code-function">$1</span>')
+                            .replace(/\b(msg|block|tx|address)\b/g, '<span class="code-variable">$1</span>');
+                        result += `<div class="code-snippet">${highlightedCode}</div>`;
+                    }
+                }
+                return result;
             }
             // Event listeners
             });
         });
     </script>
+</body>
 </html>