Spaces:

tomdecolita
/

rapgen

Running

App Files Files Community

tomdecolita commited on May 1, 2025

Commit

be36592

verified ·

1 Parent(s): 5d875b3

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +304 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Rapgen
-emoji: 🔥
-colorFrom: blue
 colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: rapgen
+emoji: 🐳
+colorFrom: purple
 colorTo: pink
 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,304 @@
-<!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>Rap Lyric Generator</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">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            min-height: 100vh;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #f72585, #7209b7, #3a0ca3);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .rap-line {
+            line-height: 1.8;
+            position: relative;
+            padding-left: 1.5rem;
+        }
+        .rap-line::before {
+            content: "♪";
+            position: absolute;
+            left: 0;
+            color: rgba(255,255,255,0.3);
+        }
+        .beat-pulse {
+            animation: pulse 0.5s infinite alternate;
+        }
+        @keyframes pulse {
+            from { transform: scale(1); }
+            to { transform: scale(1.05); }
+        }
+        .typewriter {
+            overflow: hidden;
+            border-right: .15em solid #f72585;
+            white-space: nowrap;
+            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
+        }
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #f72585; }
+        }
+    </style>
+</head>
+<body class="text-white">
+    <div class="container mx-auto px-4 py-12 max-w-4xl">
+        <header class="text-center mb-12">
+            <h1 class="text-5xl font-bold mb-2 gradient-text">Rap Verse Generator</h1>
+            <p class="text-xl text-gray-300">Drop a word, get a fire verse</p>
+        </header>
+        <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 backdrop-blur-sm border border-gray-700 shadow-2xl">
+            <div class="flex flex-col md:flex-row gap-6 mb-8">
+                <div class="flex-1">
+                    <label for="seed-word" class="block text-lg font-medium mb-2 text-pink-400">Your Inspiration Word</label>
+                    <div class="relative">
+                        <input type="text" id="seed-word" placeholder="e.g. 'money', 'hustle', 'dreams'"
+                               class="w-full px-4 py-3 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 text-white placeholder-gray-400">
+                        <button id="generate-btn" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-pink-600 hover:bg-pink-700 text-white px-4 py-1 rounded-lg transition-all duration-300 flex items-center">
+                            <i class="fas fa-bolt mr-2"></i> Generate
+                        </button>
+                    </div>
+                </div>
+                <div class="flex-1">
+                    <label for="style-select" class="block text-lg font-medium mb-2 text-purple-400">Rapper Style</label>
+                    <select id="style-select" class="w-full px-4 py-3 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white">
+                        <option value="old-school">Old School</option>
+                        <option value="trap">Trap</option>
+                        <option value="conscious">Conscious</option>
+                        <option value="gangsta">Gangsta</option>
+                        <option value="mumble">Mumble</option>
+                    </select>
+                </div>
+            </div>
+            <div id="loading" class="hidden text-center py-8">
+                <div class="inline-block text-pink-500 text-4xl mb-4 beat-pulse">
+                    <i class="fas fa-compact-disc"></i>
+                </div>
+                <p class="text-gray-300">Cooking up some fire lyrics...</p>
+            </div>
+            <div id="result" class="hidden bg-gray-900 rounded-lg p-6 border border-gray-700 shadow-inner">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-bold text-pink-400">Your Rap Verse</h3>
+                    <button id="copy-btn" class="text-gray-400 hover:text-white transition-colors">
+                        <i class="fas fa-copy"></i> Copy
+                    </button>
+                </div>
+                <div id="lyrics-output" class="space-y-3 text-gray-200">
+                    <!-- Lyrics will appear here -->
+                </div>
+                <div class="mt-6 pt-4 border-t border-gray-700 flex justify-end">
+                    <button id="new-verse-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-all duration-300 flex items-center">
+                        <i class="fas fa-redo mr-2"></i> New Verse
+                    </button>
+                </div>
+            </div>
+            <div id="placeholder" class="text-center py-12 text-gray-500">
+                <div class="text-5xl mb-4">
+                    <i class="fas fa-microphone-alt"></i>
+                </div>
+                <h3 class="text-xl mb-2">Ready to Create</h3>
+                <p>Enter a word above and generate your custom rap lyrics</p>
+            </div>
+        </div>
+        <footer class="mt-12 text-center text-gray-500 text-sm">
+            <p>Made with <i class="fas fa-heart text-pink-500"></i> for hip-hop heads</p>
+        </footer>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const generateBtn = document.getElementById('generate-btn');
+            const seedWordInput = document.getElementById('seed-word');
+            const styleSelect = document.getElementById('style-select');
+            const loadingElement = document.getElementById('loading');
+            const resultElement = document.getElementById('result');
+            const placeholderElement = document.getElementById('placeholder');
+            const lyricsOutput = document.getElementById('lyrics-output');
+            const copyBtn = document.getElementById('copy-btn');
+            const newVerseBtn = document.getElementById('new-verse-btn');
+            // Rhyme dictionaries for different styles
+            const rhymeDict = {
+                'old-school': {
+                    rhymes: ['flow', 'show', 'grow', 'know', 'slow', 'throw', 'glow', 'snow'],
+                    patterns: [
+                        "I'm the {adjective} {noun} with the {noun} to {verb}",
+                        "From the {place} to the {place}, I {verb} with {noun}",
+                        "{adjective} {noun} in the {place}, {verb}ing all day",
+                        "I {verb}, I {verb}, with my {noun} so {adjective}",
+                        "{noun} so {adjective}, make the {noun} {verb}"
+                    ]
+                },
+                'trap': {
+                    rhymes: ['drip', 'flip', 'whip', 'clip', 'ship', 'trip', 'skip', 'dip'],
+                    patterns: [
+                        "{adjective} {noun} on my {noun}, yeah I {verb}",
+                        "{verb}ing in the {place} with my {noun} so {adjective}",
+                        "{noun} {noun} {verb}, {adjective} {noun} flex",
+                        "I got {noun}, I got {noun}, {verb}ing on the {place}",
+                        "{adjective} {adjective}, {verb} with the {noun}"
+                    ]
+                },
+                'conscious': {
+                    rhymes: ['mind', 'find', 'grind', 'bind', 'kind', 'signed', 'blind', 'refined'],
+                    patterns: [
+                        "The {noun} of the {place} makes the {noun} {verb}",
+                        "We {verb} for the {noun}, we {verb} for the {place}",
+                        "{adjective} {noun} in a world so {adjective}",
+                        "The {place} {verb}s while the {noun} {verb}s",
+                        "{verb} the {noun}, {verb} the {place}"
+                    ]
+                },
+                'gangsta': {
+                    rhymes: ['heat', 'street', 'beat', 'treat', 'seat', 'meet', 'cheat', 'repeat'],
+                    patterns: [
+                        "{noun} in my {noun}, {verb}ing on the {place}",
+                        "{adjective} {noun} make the {noun} {verb}",
+                        "From the {place} to the {place}, {verb} with {noun}",
+                        "{verb} the {noun}, {adjective} {noun} flex",
+                        "{noun} so {adjective}, make the {place} {verb}"
+                    ]
+                },
+                'mumble': {
+                    rhymes: ['skrrt', 'blurp', 'yeah', 'uh', 'ayy', 'ooh', 'wow', 'pow'],
+                    patterns: [
+                        "{adjective} {noun} {noun} {verb} skrrt",
+                        "{verb} {verb} on the {noun} yeah yeah",
+                        "{noun} {noun} {adjective} {verb} uh",
+                        "{adjective} {adjective} {noun} {verb} ayy",
+                        "{verb}ing with my {noun} ooh"
+                    ]
+                }
+            };
+            // Word banks
+            const adjectives = ["dope", "fresh", "icy", "savage", "lit", "fire", "cold", "smooth", "raw", "real"];
+            const nouns = ["mic", "flow", "chain", "whip", "dream", "game", "hustle", "grind", "paper", "hood"];
+            const verbs = ["drop", "rock", "pop", "stop", "cop", "flip", "drip", "rip", "skip", "trip"];
+            const places = ["streets", "trap", "studio", "block", "hood", "spot", "yard", "crib", "lane", "city"];
+            // Generate lyrics
+            generateBtn.addEventListener('click', generateLyrics);
+            seedWordInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') generateLyrics();
+            });
+            newVerseBtn.addEventListener('click', generateLyrics);
+            function generateLyrics() {
+                const seedWord = seedWordInput.value.trim();
+                if (!seedWord) {
+                    alert("Please enter a word to generate lyrics!");
+                    return;
+                }
+                const style = styleSelect.value;
+                const styleData = rhymeDict[style];
+                // Show loading state
+                placeholderElement.classList.add('hidden');
+                loadingElement.classList.remove('hidden');
+                resultElement.classList.add('hidden');
+                // Simulate processing delay
+                setTimeout(() => {
+                    loadingElement.classList.add('hidden');
+                    resultElement.classList.remove('hidden');
+                    displayLyrics(seedWord, styleData);
+                }, 1500);
+            }
+            function displayLyrics(seedWord, styleData) {
+                lyricsOutput.innerHTML = '';
+                // Generate 8-12 lines
+                const lineCount = 8 + Math.floor(Math.random() * 5);
+                let rhymeWord = styleData.rhymes[Math.floor(Math.random() * styleData.rhymes.length)];
+                // Create intro line with seed word
+                const introLine = createLine(seedWord, styleData, true);
+                addLineToOutput(introLine);
+                // Create main verse lines
+                for (let i = 0; i < lineCount - 2; i++) {
+                    const shouldRhyme = i % 2 === 0; // Every other line rhymes
+                    const line = createLine(seedWord, styleData, shouldRhyme, rhymeWord);
+                    addLineToOutput(line);
+                }
+                // Create outro line that rhymes
+                const outroLine = createLine(seedWord, styleData, true, rhymeWord);
+                addLineToOutput(outroLine);
+            }
+            function createLine(seedWord, styleData, shouldRhyme, rhymeWord) {
+                const pattern = styleData.patterns[Math.floor(Math.random() * styleData.patterns.length)];
+                // Replace placeholders with random words
+                let line = pattern
+                    .replace(/\{adjective\}/g, () => adjectives[Math.floor(Math.random() * adjectives.length)])
+                    .replace(/\{noun\}/g, () => nouns[Math.floor(Math.random() * nouns.length)])
+                    .replace(/\{verb\}/g, () => verbs[Math.floor(Math.random() * verbs.length)])
+                    .replace(/\{place\}/g, () => places[Math.floor(Math.random() * places.length)]);
+                // Insert seed word randomly
+                const insertPos = Math.floor(Math.random() * line.split(' ').length);
+                const words = line.split(' ');
+                words.splice(insertPos, 0, seedWord);
+                line = words.join(' ');
+                // Force rhyme if needed
+                if (shouldRhyme && rhymeWord) {
+                    const words = line.split(' ');
+                    words[words.length - 1] = rhymeWord;
+                    line = words.join(' ');
+                }
+                return capitalizeFirstLetter(line);
+            }
+            function addLineToOutput(line) {
+                const lineElement = document.createElement('p');
+                lineElement.className = 'rap-line';
+                lineElement.textContent = line;
+                lyricsOutput.appendChild(lineElement);
+            }
+            function capitalizeFirstLetter(string) {
+                return string.charAt(0).toUpperCase() + string.slice(1);
+            }
+            // Copy functionality
+            copyBtn.addEventListener('click', function() {
+                const lyrics = Array.from(lyricsOutput.children)
+                    .map(line => line.textContent)
+                    .join('\n');
+                navigator.clipboard.writeText(lyrics).then(() => {
+                    const originalIcon = copyBtn.innerHTML;
+                    copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
+                    setTimeout(() => {
+                        copyBtn.innerHTML = originalIcon;
+                    }, 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=tomdecolita/rapgen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Create a website rap lyrics generator. Write a single word and use the word to generate an entire lyric for a rapper. Adjust the flow