AiBlogWriter

Running

App Files Files Community

openfree commited on Nov 16, 2024

Commit

af7454c

verified ·

1 Parent(s): 88ee1eb

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +296 -19

index.html CHANGED Viewed

@@ -1,19 +1,296 @@
-<!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>AI Blog Generator</title>
+    <style>
+        :root {
+            --primary: #6366f1;
+            --secondary: #4f46e5;
+            --bg: #f8fafc;
+            --text: #1e293b;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Inter', system-ui, sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            line-height: 1.5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        .header h1 {
+            font-size: 2.5rem;
+            color: var(--primary);
+            margin-bottom: 1rem;
+        }
+        .header p {
+            color: #64748b;
+        }
+        .grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+        }
+        .panel {
+            background: white;
+            padding: 2rem;
+            border-radius: 1rem;
+            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+        }
+        .input-group {
+            margin-bottom: 1.5rem;
+        }
+        .input-group label {
+            display: block;
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+        }
+        .input-group input,
+        .input-group textarea,
+        .input-group select {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid #e2e8f0;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+        }
+        .input-group textarea {
+            height: 150px;
+            resize: vertical;
+        }
+        .btn {
+            background: var(--primary);
+            color: white;
+            border: none;
+            padding: 1rem 2rem;
+            border-radius: 0.5rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .btn:hover {
+            background: var(--secondary);
+        }
+        .btn-secondary {
+            background: #e2e8f0;
+            color: var(--text);
+        }
+        .btn-secondary:hover {
+            background: #cbd5e1;
+        }
+        .output {
+            margin-top: 1rem;
+            padding: 1rem;
+            background: #f1f5f9;
+            border-radius: 0.5rem;
+            white-space: pre-wrap;
+        }
+        .writing-status {
+            display: flex;
+            align-items: center;
+            margin-top: 1rem;
+            padding: 1rem;
+            background: #f1f5f9;
+            border-radius: 0.5rem;
+        }
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #22c55e;
+            margin-right: 0.5rem;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.2); opacity: 0.5; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+        .tools {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+        @media (max-width: 768px) {
+            .grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <h1>AI Blog Generator</h1>
+            <p>Generate high-quality blog content with AI assistance</p>
+        </header>
+        <div class="grid">
+            <div class="panel">
+                <h2>Input</h2>
+                <div class="tools">
+                    <button class="btn btn-secondary" onclick="generateIdeas()">Generate Ideas</button>
+                    <button class="btn btn-secondary" onclick="improveWriting()">Improve Writing</button>
+                </div>
+                <div class="input-group">
+                    <label for="topic">Topic/Keywords</label>
+                    <input type="text" id="topic" placeholder="Enter main topic or keywords">
+                </div>
+                <div class="input-group">
+                    <label for="tone">Writing Tone</label>
+                    <select id="tone">
+                        <option value="professional">Professional</option>
+                        <option value="casual">Casual</option>
+                        <option value="technical">Technical</option>
+                        <option value="creative">Creative</option>
+                    </select>
+                </div>
+                <div class="input-group">
+                    <label for="length">Article Length</label>
+                    <select id="length">
+                        <option value="short">Short (~300 words)</option>
+                        <option value="medium">Medium (~600 words)</option>
+                        <option value="long">Long (~1000 words)</option>
+                    </select>
+                </div>
+                <button class="btn" onclick="generateContent()">Generate Content</button>
+            </div>
+            <div class="panel">
+                <h2>Output</h2>
+                <div id="writingStatus" class="writing-status" style="display: none;">
+                    <div class="status-dot"></div>
+                    <span>AI is writing...</span>
+                </div>
+                <div id="output" class="output"></div>
+            </div>
+        </div>
+    </div>
+    <script>
+        function simulateAIWriting(text, delay = 50) {
+            return new Promise((resolve) => {
+                const output = document.getElementById('output');
+                let index = 0;
+                const interval = setInterval(() => {
+                    if (index < text.length) {
+                        output.textContent += text[index];
+                        index++;
+                    } else {
+                        clearInterval(interval);
+                        resolve();
+                    }
+                }, delay);
+            });
+        }
+        function generateContent() {
+            const topic = document.getElementById('topic').value;
+            const tone = document.getElementById('tone').value;
+            const length = document.getElementById('length').value;
+            if (!topic) {
+                alert('Please enter a topic');
+                return;
+            }
+            document.getElementById('writingStatus').style.display = 'flex';
+            document.getElementById('output').textContent = '';
+            // Simulated AI response
+            const content = generateArticle(topic, tone, length);
+            document.getElementById('writingStatus').style.display = 'none';
+            simulateAIWriting(content);
+        }
+        function generateArticle(topic, tone, length) {
+            // This is a mock function that would normally connect to an AI API
+            const templates = {
+                professional: `Title: ${topic}: A Comprehensive Analysis\n\nIn today's rapidly evolving landscape, ${topic} has emerged as a crucial factor in shaping our understanding of modern developments. This article explores the key aspects and implications of ${topic}, providing valuable insights for professionals and enthusiasts alike.\n\nKey Points:\n1. Understanding the fundamentals\n2. Current trends and developments\n3. Future implications\n`,
+                casual: `Hey there! Let's Talk About ${topic}!\n\nEver wondered what makes ${topic} so interesting? Well, you're in for a treat! Today we're going to dive into this fascinating topic and explore all the cool things about it.\n\nWhat's the Deal With ${topic}?\n`,
+                technical: `Technical Analysis: ${topic}\n\nAbstract:\nThis technical examination of ${topic} provides a detailed analysis of its core components, implementation considerations, and technical specifications.\n\nTechnical Overview:\n`,
+                creative: `The Art of ${topic}: A Creative Exploration\n\nImagine a world where ${topic} shapes everything around us. In this creative journey, we'll explore the fascinating dimensions of ${topic} and its impact on our creative consciousness.\n\n`
+            };
+            return templates[tone] + `[Content continues with ${length} format...]`;
+        }
+        function generateIdeas() {
+            const topic = document.getElementById('topic').value;
+            if (!topic) {
+                alert('Please enter a topic first');
+                return;
+            }
+            const ideas = [
+                `- How ${topic} is Changing the Future`,
+                `- The Ultimate Guide to ${topic}`,
+                `- 10 Things You Didn't Know About ${topic}`,
+                `- Why ${topic} Matters in 2024`,
+                `- The Evolution of ${topic}: Past, Present, and Future`
+            ].join('\n');
+            document.getElementById('output').textContent = 'Blog Post Ideas:\n' + ideas;
+        }
+        function improveWriting() {
+            const currentText = document.getElementById('output').textContent;
+            if (!currentText) {
+                alert('Generate content first');
+                return;
+            }
+            document.getElementById('writingStatus').style.display = 'flex';
+            setTimeout(() => {
+                document.getElementById('writingStatus').style.display = 'none';
+                document.getElementById('output').textContent = 'Enhanced Version:\n\n' +
+                    currentText.replace(/\b\w+\b/g, match =>
+                        Math.random() > 0.8 ? match.charAt(0).toUpperCase() + match.slice(1) : match
+                    );
+            }, 2000);
+        }
+    </script>
+</body>
+</html>