Hugging Face's logo

Spaces:
qdqd
/
story-ai
Running

App Files Community
qdqd commited on
Commit
bb0e9e0
·
verified ·
1 Parent(s): 93a2d80

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +203 -0
templates/index.html ADDED
@@ -0,0 +1,203 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Wattpad Story Generator</title>
7
+ <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
8
+ <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
10
+ </head>
11
+ <body>
12
+ <nav class="navbar">
13
+ <div class="nav-container">
14
+ <div class="logo">
15
+ <i class="fas fa-book-open"></i>
16
+ <h1>Story<span>AI</span></h1>
17
+ </div>
18
+ <div class="nav-links">
19
+ <a href="#" class="active"><i class="fas fa-magic"></i> Generate</a>
20
+ <a href="#"><i class="fas fa-book"></i> </a>
21
+ </div>
22
+ </div>
23
+ </nav>
24
+
25
+ <div class="container">
26
+ <main>
27
+ <div class="story-generator">
28
+ <div class="input-section">
29
+ <h2><i class="fas fa-feather-alt"></i> Create Your Story</h2>
30
+ <p class="subtitle">Transform your ideas into captivating stories</p>
31
+ <div class="input-group">
32
+ <div class="input-wrapper">
33
+ <i class="fas fa-pencil-alt input-icon"></i>
34
+ <input type="text" id="topic" placeholder="Enter your story topic..." required>
35
+ </div>
36
+ <button id="generate-btn">
37
+ <i class="fas fa-wand-magic-sparkles"></i>
38
+ Generate Story
39
+ </button>
40
+ </div>
41
+ </div>
42
+
43
+ <div class="loading-spinner" style="display: none;">
44
+ <div class="spinner"></div>
45
+ <p><i class="fas fa-pen-fancy"></i> Crafting your story with creativity...</p>
46
+ </div>
47
+
48
+ <div class="story-container" style="display: none;">
49
+ <div class="chapter-navigation">
50
+ <button class="nav-btn" id="prev-chapter" disabled>
51
+ <i class="fas fa-chevron-left"></i> Previous Chapter
52
+ </button>
53
+ <span class="chapter-indicator">Chapter <span id="current-chapter">1</span></span>
54
+ <button class="nav-btn" id="next-chapter">
55
+ Next Chapter <i class="fas fa-chevron-right"></i>
56
+ </button>
57
+ </div>
58
+
59
+ <div class="story-header">
60
+ <div class="story-meta">
61
+ <i class="fas fa-book-open story-icon"></i>
62
+ <h3 class="story-title"></h3>
63
+ </div>
64
+ <div class="story-stats">
65
+ <span><i class="fas fa-eye"></i> 0 Reads</span>
66
+ <span><i class="fas fa-star"></i> 0 Votes</span>
67
+ <span><i class="fas fa-comment"></i> 0 Comments</span>
68
+ </div>
69
+ </div>
70
+
71
+ <div class="chapters-list">
72
+ <!-- Chapters will be dynamically added here -->
73
+ </div>
74
+
75
+ <div class="story-actions">
76
+ <button class="action-btn"><i class="fas fa-star"></i> Vote</button>
77
+ <button class="action-btn"><i class="fas fa-comment"></i> Comment</button>
78
+ <button class="action-btn"><i class="fas fa-share"></i> Share</button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </main>
83
+ </div>
84
+
85
+ <script>
86
+ let currentChapter = 1;
87
+ let allChapters = [];
88
+ let currentTopic = '';
89
+
90
+ document.getElementById('generate-btn').addEventListener('click', async () => {
91
+ const topic = document.getElementById('topic').value.trim();
92
+ if (!topic) {
93
+ alert('Please enter a topic');
94
+ return;
95
+ }
96
+
97
+ currentTopic = topic;
98
+ currentChapter = 1;
99
+ allChapters = [];
100
+ await generateChapter(topic);
101
+ });
102
+
103
+ document.getElementById('next-chapter').addEventListener('click', async () => {
104
+ // Only use the last chapter as context
105
+ const lastChapter = allChapters[allChapters.length - 1].content;
106
+ currentChapter++;
107
+ await generateChapter(currentTopic, lastChapter);
108
+ });
109
+
110
+ document.getElementById('prev-chapter').addEventListener('click', () => {
111
+ if (currentChapter > 1) {
112
+ currentChapter--;
113
+ updateChapterDisplay();
114
+ updateNavigationButtons();
115
+ }
116
+ });
117
+
118
+ async function generateChapter(topic, previousChapter = '') {
119
+ const loadingSpinner = document.querySelector('.loading-spinner');
120
+ const storyContainer = document.querySelector('.story-container');
121
+
122
+ loadingSpinner.style.display = 'flex';
123
+ storyContainer.style.display = 'none';
124
+
125
+ try {
126
+ const response = await fetch('/generate', {
127
+ method: 'POST',
128
+ headers: {
129
+ 'Content-Type': 'application/json',
130
+ },
131
+ body: JSON.stringify({
132
+ topic,
133
+ previous_chapter: previousChapter,
134
+ chapter_number: currentChapter
135
+ }),
136
+ });
137
+
138
+ const data = await response.json();
139
+
140
+ if (response.ok) {
141
+ if (currentChapter === 1) {
142
+ allChapters = [];
143
+ }
144
+ allChapters.push({
145
+ number: currentChapter,
146
+ content: data.story,
147
+ topic: topic
148
+ });
149
+
150
+ document.querySelector('.story-title').textContent = topic;
151
+ updateChapterDisplay();
152
+ storyContainer.style.display = 'block';
153
+ updateNavigationButtons();
154
+ window.scrollTo({
155
+ top: storyContainer.offsetTop - 20,
156
+ behavior: 'smooth'
157
+ });
158
+ } else {
159
+ alert(data.error || 'Failed to generate story');
160
+ }
161
+ } catch (error) {
162
+ alert('An error occurred while generating the story');
163
+ } finally {
164
+ loadingSpinner.style.display = 'none';
165
+ }
166
+ }
167
+
168
+ function updateChapterDisplay() {
169
+ const chaptersContainer = document.querySelector('.chapters-list');
170
+ chaptersContainer.innerHTML = '';
171
+
172
+ allChapters.forEach((chapter, index) => {
173
+ const chapterDiv = document.createElement('div');
174
+ chapterDiv.className = 'chapter-content' + (index + 1 === currentChapter ? ' active' : '');
175
+ chapterDiv.style.display = index + 1 === currentChapter ? 'block' : 'none';
176
+ chapterDiv.innerHTML = formatChapter(chapter.content, index + 1);
177
+ chaptersContainer.appendChild(chapterDiv);
178
+ });
179
+
180
+ document.getElementById('current-chapter').textContent = currentChapter;
181
+ }
182
+
183
+ function updateNavigationButtons() {
184
+ const prevButton = document.getElementById('prev-chapter');
185
+ const nextButton = document.getElementById('next-chapter');
186
+
187
+ prevButton.disabled = currentChapter === 1;
188
+ nextButton.disabled = false;
189
+ }
190
+
191
+ function formatChapter(content, chapterNum) {
192
+ return content
193
+ .replace(/\n/g, '<br>')
194
+ .replace(/<chapter>/g, `<div class="chapter-section">`)
195
+ .replace(/<\/chapter>/g, '</div>')
196
+ .replace(/<chapter_number>(.*?)<\/chapter_number>/g, `<h4 class="chapter-title">Chapter ${chapterNum}</h4>`)
197
+ .replace(/<chapter_summary>(.*?)<\/chapter_summary>/g, '<div class="chapter-summary">$1</div>')
198
+ .replace(/<narrative_hook>(.*?)<\/narrative_hook>/g, '<div class="narrative-hook">$1</div>')
199
+ .replace(/<content_warning>(.*?)<\/content_warning>/g, '<div class="content-warning"><i class="fas fa-exclamation-triangle"></i> Content Warning: $1</div>');
200
+ }
201
+ </script>
202
+ </body>
203
+ </html>