Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Headline Generator</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Styles remain unchanged */ | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navbar and container structure remains unchanged --> | |
| <div class="container"> | |
| <h1>Headline Generator</h1> | |
| <p>Effortlessly generate eye-catching headlines with AI. All we need is a topic from you.</p> | |
| <div class="headline-box"> | |
| <h2>AI-Powered Headline Generator</h2> | |
| <form id="headline-form"> | |
| <textarea name="article" id="topic-input" placeholder="Enter your article here" rows="8" required></textarea> | |
| <button type="submit">Generate</button> | |
| </form> | |
| </div> | |
| <div class="predicted-headline" id="predicted-headline"> | |
| Your generated headline will appear here! | |
| </div> | |
| <!-- SEO score section remains unchanged --> | |
| </div> | |
| <script> | |
| document.getElementById('headline-form').addEventListener('submit', function(event) { | |
| event.preventDefault(); // Prevent default form submission | |
| const article = document.getElementById('topic-input').value; | |
| if (!article) { | |
| alert('Please enter an article.'); | |
| return; | |
| } | |
| const apiKey = 'YOUR_API_KEY_HERE'; // Replace with your actual Gemini API key | |
| const headers = { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': 'Bearer ' + apiKey | |
| }; | |
| const data = { | |
| "prompt": { | |
| "text": `Generate a headline for the following article:\n\n${article}` | |
| }, | |
| "temperature": 0.7, | |
| "maxOutputTokens": 128 | |
| }; | |
| fetch('https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent', { | |
| method: 'POST', | |
| headers: headers, | |
| body: JSON.stringify(data) | |
| }) | |
| .then(response => { | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| return response.json(); | |
| }) | |
| .then(data => { | |
| const headline = data.results[0].candidates[0].output.text; | |
| document.getElementById('predicted-headline').innerText = headline; | |
| document.getElementById('predicted-headline').classList.add('visible'); | |
| }) | |
| .catch(error => { | |
| console.error('Error generating headline:', error); | |
| alert('An error occurred while generating the headline.'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |