Spaces:
Running
Running
File size: 4,069 Bytes
18b56c3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
// API Configuration - Replace with your actual Groq API key
const GROQ_API_KEY = 'YOUR_GROQ_API_KEY_HERE'; // TODO: Replace with your actual API key
const GROQ_API_URL = 'https://api.groq.com/openai/v1/chat/completions';
// DOM Elements
const chatHistory = document.getElementById('chatHistory');
const userInput = document.getElementById('userInput');
const sendButton = document.getElementById('sendButton');
// Add message to chat history
function addMessage(content, isUser = false) {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message');
messageDiv.classList.add(isUser ? 'user-message' : 'bot-message');
const messageContent = document.createElement('div');
messageContent.classList.add('message-content');
messageContent.textContent = content;
messageDiv.appendChild(messageContent);
chatHistory.appendChild(messageDiv);
// Scroll to bottom
chatHistory.scrollTop = chatHistory.scrollHeight;
}
// Show loading indicator
function showLoading() {
const loadingDiv = document.createElement('div');
loadingDiv.classList.add('message', 'bot-message');
loadingDiv.id = 'loadingIndicator';
const loadingContent = document.createElement('div');
loadingContent.classList.add('message-content');
loadingContent.innerHTML = 'Generating your story... <span class="loading"></span>';
loadingDiv.appendChild(loadingContent);
chatHistory.appendChild(loadingDiv);
chatHistory.scrollTop = chatHistory.scrollHeight;
}
// Remove loading indicator
function removeLoading() {
const loadingIndicator = document.getElementById('loadingIndicator');
if (loadingIndicator) {
loadingIndicator.remove();
}
}
// Generate story using Groq API
async function generateStory(prompt) {
const systemPrompt = `You are a professional novelist specializing in creating engaging, original stories.
Generate a compelling novel excerpt based on the user's prompt.
Focus on vivid descriptions, character development, and immersive storytelling.
The excerpt should be 300-500 words long and written in a literary style appropriate to the genre specified.
Do not include any meta-commentary or disclaimers - just the story itself.`;
try {
const response = await fetch(GROQ_API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${GROQ_API_KEY}`
},
body: JSON.stringify({
model: "llama3-8b-8192", // Using LLaMA 3 8B model
messages: [
{ role: "system", content: systemPrompt },
{ role: "user", content: prompt }
],
temperature: 0.7,
max_tokens: 1000,
top_p: 0.9
})
});
if (!response.ok) {
throw new Error(`API error: ${response.status}`);
}
const data = await response.json();
return data.choices[0].message.content;
} catch (error) {
console.error('Error generating story:', error);
return "I apologize, but I encountered an error while generating your story. Please try again later.";
}
}
// Handle send button click
async function handleSend() {
const prompt = userInput.value.trim();
if (!prompt) return;
// Add user message
addMessage(prompt, true);
userInput.value = '';
sendButton.disabled = true;
// Show loading
showLoading();
// Generate story
const story = await generateStory(prompt);
// Remove loading and add bot response
removeLoading();
addMessage(story);
sendButton.disabled = false;
userInput.focus();
}
// Event listeners
sendButton.addEventListener('click', handleSend);
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSend();
}
});
// Initialize
userInput.focus(); |