Spaces:

ordlibrary
/

facepump

Running

App Files Files Community

ordlibrary commited on Apr 7

Commit

203855a

verified ·

1 Parent(s): 6b4bc6b

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +397 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Facepump
-emoji: 🐢
-colorFrom: yellow
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: facepump
+emoji: 🐳
+colorFrom: gray
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,397 @@
-<!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>Solana AI Meme Token Creator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #1a1b2f 0%, #2a2b3d 100%);
+            min-height: 100vh;
+            color: #fff;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #9945FF 0%, #14F195 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        }
+        .pulse-animation {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(153, 69, 255, 0.7);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(153, 69, 255, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(153, 69, 255, 0);
+            }
+        }
+        .token-preview {
+            transition: all 0.3s ease;
+        }
+        .token-preview:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Header -->
+    <header class="py-6 px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <img src="https://solana.com/src/img/branding/solanaLogoMark.svg" alt="Solana Logo" class="h-8 w-8">
+                <h1 class="text-2xl font-bold gradient-text">Solana AI Meme Creator</h1>
+            </div>
+            <div id="wallet-connect" class="flex items-center space-x-4">
+                <button id="connect-wallet-btn" class="px-4 py-2 bg-gradient-to-r from-purple-500 to-green-500 text-white rounded-full font-medium hover:opacity-90 transition">
+                    Connect Wallet
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="flex-grow flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8 py-12">
+        <div class="w-full max-w-4xl mx-auto">
+            <div class="text-center mb-12">
+                <h2 class="text-4xl md:text-5xl font-bold mb-4">Create Your <span class="gradient-text">Meme Token</span> with AI</h2>
+                <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+                    Just describe your token idea with your voice and our AI will handle everything else - from naming to deployment on Solana!
+                </p>
+            </div>
+            <!-- Voice Input Section -->
+            <div class="glass-card rounded-2xl p-8 mb-8">
+                <div class="flex flex-col items-center">
+                    <div id="voice-input-container" class="relative mb-6">
+                        <button id="voice-btn" class="w-24 h-24 rounded-full bg-gradient-to-r from-purple-500 to-green-500 text-white flex items-center justify-center pulse-animation hover:scale-105 transition">
+                            <i class="fas fa-microphone text-3xl"></i>
+                        </button>
+                        <div id="recording-indicator" class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full hidden"></div>
+                    </div>
+                    <div id="voice-feedback" class="w-full max-w-md text-center mb-6">
+                        <p id="status-message" class="text-gray-300">Click the microphone and describe your meme token idea</p>
+                        <div id="transcript-container" class="mt-4 p-4 bg-gray-800 rounded-lg hidden">
+                            <p id="transcript" class="text-left"></p>
+                        </div>
+                    </div>
+                    <div id="ai-thinking" class="hidden flex items-center space-x-2 text-gray-300">
+                        <div class="flex space-x-1">
+                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0s"></div>
+                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
+                        </div>
+                        <span>AI is creating your token...</span>
+                    </div>
+                </div>
+            </div>
+            <!-- Token Preview Section -->
+            <div id="token-preview-section" class="glass-card rounded-2xl p-8 hidden">
+                <h3 class="text-2xl font-bold mb-6 text-center">Your Token Preview</h3>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <!-- Token Info -->
+                    <div class="token-preview bg-gray-800 rounded-xl p-6">
+                        <h4 class="text-lg font-semibold mb-4">Token Details</h4>
+                        <div class="space-y-3">
+                            <div>
+                                <p class="text-sm text-gray-400">Name</p>
+                                <p id="token-name" class="font-medium">-</p>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-400">Symbol</p>
+                                <p id="token-symbol" class="font-medium">-</p>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-400">Supply</p>
+                                <p id="token-supply" class="font-medium">-</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Token Logo -->
+                    <div class="token-preview bg-gray-800 rounded-xl p-6 flex flex-col items-center justify-center">
+                        <h4 class="text-lg font-semibold mb-4">Logo</h4>
+                        <div id="token-logo" class="w-24 h-24 rounded-full bg-gray-700 flex items-center justify-center mb-4">
+                            <i class="fas fa-image text-3xl text-gray-500"></i>
+                        </div>
+                        <p class="text-sm text-gray-400 text-center">AI Generated</p>
+                    </div>
+                    <!-- Token Description -->
+                    <div class="token-preview bg-gray-800 rounded-xl p-6">
+                        <h4 class="text-lg font-semibold mb-4">Description</h4>
+                        <p id="token-description" class="text-sm text-gray-300">-</p>
+                    </div>
+                </div>
+                <div class="mt-8 flex justify-center">
+                    <button id="deploy-btn" class="px-6 py-3 bg-gradient-to-r from-purple-500 to-green-500 text-white rounded-full font-medium hover:opacity-90 transition">
+                        Deploy to Solana
+                    </button>
+                </div>
+            </div>
+            <!-- Success Message -->
+            <div id="success-message" class="glass-card rounded-2xl p-8 text-center hidden">
+                <div class="mb-6">
+                    <i class="fas fa-check-circle text-6xl text-green-500"></i>
+                </div>
+                <h3 class="text-2xl font-bold mb-4">Token Deployed Successfully!</h3>
+                <p id="success-details" class="text-gray-300 mb-6">Your meme token is now live on Solana.</p>
+                <div class="flex justify-center space-x-4">
+                    <a id="view-token-link" href="#" target="_blank" class="px-6 py-2 bg-gray-800 text-white rounded-full font-medium hover:bg-gray-700 transition">
+                        View Token
+                    </a>
+                    <a id="pump-fun-link" href="#" target="_blank" class="px-6 py-2 bg-gradient-to-r from-purple-500 to-green-500 text-white rounded-full font-medium hover:opacity-90 transition">
+                        Open in Pump.fun
+                    </a>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="py-6 px-4 sm:px-6 lg:px-8 text-center text-gray-400 text-sm">
+        <div class="flex flex-col md:flex-row justify-center items-center space-y-2 md:space-y-0 md:space-x-6">
+            <p>Powered by Solana, OpenAI, and Pump.fun</p>
+            <div class="flex space-x-4">
+                <a href="#" class="hover:text-white transition">Terms</a>
+                <a href="#" class="hover:text-white transition">Privacy</a>
+                <a href="#" class="hover:text-white transition">Docs</a>
+            </div>
+        </div>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM Elements
+            const connectWalletBtn = document.getElementById('connect-wallet-btn');
+            const voiceBtn = document.getElementById('voice-btn');
+            const recordingIndicator = document.getElementById('recording-indicator');
+            const transcriptContainer = document.getElementById('transcript-container');
+            const transcript = document.getElementById('transcript');
+            const statusMessage = document.getElementById('status-message');
+            const aiThinking = document.getElementById('ai-thinking');
+            const tokenPreviewSection = document.getElementById('token-preview-section');
+            const successMessage = document.getElementById('success-message');
+            // Token preview elements
+            const tokenName = document.getElementById('token-name');
+            const tokenSymbol = document.getElementById('token-symbol');
+            const tokenSupply = document.getElementById('token-supply');
+            const tokenDescription = document.getElementById('token-description');
+            const tokenLogo = document.getElementById('token-logo');
+            // Buttons
+            const deployBtn = document.getElementById('deploy-btn');
+            const viewTokenLink = document.getElementById('view-token-link');
+            const pumpFunLink = document.getElementById('pump-fun-link');
+            // State
+            let isRecording = false;
+            let recognition;
+            let walletConnected = false;
+            // Mock wallet connection
+            connectWalletBtn.addEventListener('click', function() {
+                if (!walletConnected) {
+                    walletConnected = true;
+                    connectWalletBtn.textContent = '0x7f...3a4b';
+                    connectWalletBtn.classList.remove('from-purple-500', 'to-green-500');
+                    connectWalletBtn.classList.add('bg-gray-800');
+                    // Show tooltip with mock address
+                    const tooltip = document.createElement('div');
+                    tooltip.className = 'absolute z-10 mt-2 px-3 py-1 bg-gray-800 text-white text-sm rounded-md shadow-lg';
+                    tooltip.textContent = '0x7f3a1b2c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9';
+                    connectWalletBtn.appendChild(tooltip);
+                    setTimeout(() => {
+                        tooltip.remove();
+                    }, 2000);
+                }
+            });
+            // Voice recognition setup
+            if ('webkitSpeechRecognition' in window) {
+                recognition = new webkitSpeechRecognition();
+                recognition.continuous = true;
+                recognition.interimResults = true;
+                recognition.onstart = function() {
+                    isRecording = true;
+                    voiceBtn.classList.add('from-red-500', 'to-yellow-500');
+                    voiceBtn.classList.remove('from-purple-500', 'to-green-500');
+                    recordingIndicator.classList.remove('hidden');
+                    statusMessage.textContent = "Listening... Describe your meme token idea";
+                    transcriptContainer.classList.add('hidden');
+                };
+                recognition.onresult = function(event) {
+                    let interimTranscript = '';
+                    let finalTranscript = '';
+                    for (let i = event.resultIndex; i < event.results.length; i++) {
+                        const transcript = event.results[i][0].transcript;
+                        if (event.results[i].isFinal) {
+                            finalTranscript += transcript;
+                        } else {
+                            interimTranscript += transcript;
+                        }
+                    }
+                    if (finalTranscript) {
+                        transcript.textContent = finalTranscript;
+                        transcriptContainer.classList.remove('hidden');
+                        processTokenCreation(finalTranscript);
+                    }
+                };
+                recognition.onerror = function(event) {
+                    console.error('Speech recognition error', event.error);
+                    stopRecording();
+                    statusMessage.textContent = "Error occurred. Please try again.";
+                };
+                recognition.onend = function() {
+                    if (isRecording) {
+                        // If recording was stopped unexpectedly, try to restart
+                        recognition.start();
+                    }
+                };
+            } else {
+                voiceBtn.disabled = true;
+                statusMessage.textContent = "Voice recognition not supported in your browser";
+            }
+            // Voice button click handler
+            voiceBtn.addEventListener('click', function() {
+                if (!walletConnected) {
+                    statusMessage.textContent = "Please connect your wallet first";
+                    return;
+                }
+                if (isRecording) {
+                    stopRecording();
+                } else {
+                    startRecording();
+                }
+            });
+            // Deploy button click handler
+            deployBtn.addEventListener('click', function() {
+                deployBtn.disabled = true;
+                deployBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Deploying...';
+                // Simulate deployment process
+                setTimeout(() => {
+                    tokenPreviewSection.classList.add('hidden');
+                    successMessage.classList.remove('hidden');
+                    // Set success details
+                    document.getElementById('success-details').textContent =
+                        `${tokenName.textContent} (${tokenSymbol.textContent}) has been deployed successfully with ${tokenSupply.textContent} tokens.`;
+                    // Set links (mock)
+                    viewTokenLink.href = "https://solscan.io/token/mocktokenaddress";
+                    pumpFunLink.href = "https://pump.fun/mocktokenaddress";
+                    // Reset deploy button
+                    setTimeout(() => {
+                        deployBtn.disabled = false;
+                        deployBtn.innerHTML = 'Deploy to Solana';
+                    }, 2000);
+                }, 3000);
+            });
+            // Helper functions
+            function startRecording() {
+                if (recognition) {
+                    recognition.start();
+                }
+            }
+            function stopRecording() {
+                isRecording = false;
+                if (recognition) {
+                    recognition.stop();
+                }
+                voiceBtn.classList.remove('from-red-500', 'to-yellow-500');
+                voiceBtn.classList.add('from-purple-500', 'to-green-500');
+                recordingIndicator.classList.add('hidden');
+            }
+            function processTokenCreation(description) {
+                stopRecording();
+                statusMessage.textContent = "Processing your request...";
+                aiThinking.classList.remove('hidden');
+                // Simulate AI processing
+                setTimeout(() => {
+                    aiThinking.classList.add('hidden');
+                    // Generate mock token data based on description
+                    const words = description.toLowerCase().split(' ');
+                    const animals = ['dog', 'cat', 'frog', 'whale', 'shark', 'ape', 'bull', 'bear'];
+                    const adjectives = ['super', 'mega', 'hyper', 'ultra', 'quantum', 'epic', 'legendary'];
+                    const themes = ['moon', 'mars', 'earth', 'sun', 'galaxy', 'universe', 'cosmos'];
+                    // Find matching words
+                    let animalMatch = animals.find(a => words.includes(a)) || animals[Math.floor(Math.random() * animals.length)];
+                    let adjMatch = adjectives.find(a => words.includes(a)) || adjectives[Math.floor(Math.random() * adjectives.length)];
+                    let themeMatch = themes.find(t => words.includes(t)) || themes[Math.floor(Math.random() * themes.length)];
+                    // Set token details
+                    const name = `${adjMatch.charAt(0).toUpperCase() + adjMatch.slice(1)} ${animalMatch.charAt(0).toUpperCase() + animalMatch.slice(1)}`;
+                    const symbol = `${adjMatch.substring(0, 2).toUpperCase()}${animalMatch.substring(0, 2).toUpperCase()}`;
+                    const supply = Math.floor(Math.random() * 900000 + 100000).toLocaleString() + ",000,000";
+                    const desc = `The ${name} token represents the ${themeMatch} ${animalMatch} movement. ${description}`;
+                    tokenName.textContent = name;
+                    tokenSymbol.textContent = symbol;
+                    tokenSupply.textContent = supply;
+                    tokenDescription.textContent = desc;
+                    // Generate random logo color
+                    const colors = ['from-purple-500 to-pink-500', 'from-green-400 to-blue-500', 'from-yellow-400 to-red-500', 'from-indigo-500 to-purple-500'];
+                    const randomColor = colors[Math.floor(Math.random() * colors.length)];
+                    tokenLogo.innerHTML = '';
+                    const logoDiv = document.createElement('div');
+                    logoDiv.className = `w-full h-full rounded-full bg-gradient-to-r ${randomColor} flex items-center justify-center text-white font-bold text-xl`;
+                    logoDiv.textContent = symbol;
+                    tokenLogo.appendChild(logoDiv);
+                    // Show preview
+                    tokenPreviewSection.classList.remove('hidden');
+                }, 2000);
+            }
+        });
+    </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=ordlibrary/facepump" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>