Hugging Face's logo

Spaces:
nyaringe
/
practical-models
Running

App Files Community
nyaringe commited on
Commit
ba03450
·
verified ·
1 Parent(s): f113f7a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1466 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Practical Models
3
- emoji: 📉
4
- colorFrom: purple
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: practical-models
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1466 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Cookbook Generator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .fade-in {
11
+ animation: fadeIn 0.5s ease-in-out;
12
+ }
13
+
14
+ @keyframes fadeIn {
15
+ from { opacity: 0; transform: translateY(10px); }
16
+ to { opacity: 1; transform: translateY(0); }
17
+ }
18
+
19
+ .recipe-card {
20
+ transition: all 0.3s ease;
21
+ }
22
+
23
+ .recipe-card:hover {
24
+ transform: translateY(-5px);
25
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
26
+ }
27
+
28
+ .progress-step {
29
+ position: relative;
30
+ }
31
+
32
+ .progress-step:not(:last-child):after {
33
+ content: '';
34
+ position: absolute;
35
+ top: 24px;
36
+ left: 50%;
37
+ height: 40px;
38
+ width: 2px;
39
+ background-color: #e5e7eb;
40
+ transform: translateX(-50%);
41
+ }
42
+
43
+ .progress-step.active:not(:last-child):after {
44
+ background-color: #3b82f6;
45
+ }
46
+
47
+ .markdown-content h2 {
48
+ font-size: 1.5rem;
49
+ font-weight: bold;
50
+ margin-top: 1.5rem;
51
+ margin-bottom: 1rem;
52
+ color: #1f2937;
53
+ }
54
+
55
+ .markdown-content h3 {
56
+ font-size: 1.25rem;
57
+ font-weight: bold;
58
+ margin-top: 1.25rem;
59
+ margin-bottom: 0.75rem;
60
+ color: #374151;
61
+ }
62
+
63
+ .markdown-content ul {
64
+ list-style-type: disc;
65
+ padding-left: 1.5rem;
66
+ margin-bottom: 1rem;
67
+ }
68
+
69
+ .markdown-content ol {
70
+ list-style-type: decimal;
71
+ padding-left: 1.5rem;
72
+ margin-bottom: 1rem;
73
+ }
74
+
75
+ .markdown-content p {
76
+ margin-bottom: 1rem;
77
+ line-height: 1.6;
78
+ }
79
+ </style>
80
+ </head>
81
+ <body class="bg-gray-50 min-h-screen">
82
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
83
+ <!-- Header -->
84
+ <header class="text-center mb-12">
85
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">Cookbook Generator</h1>
86
+ <p class="text-lg text-gray-600">Create professional cookbooks with AI assistance</p>
87
+ </header>
88
+
89
+ <!-- Progress Steps -->
90
+ <div class="flex justify-between mb-12 relative">
91
+ <div class="progress-step text-center w-1/6 active" id="step1-indicator">
92
+ <div class="w-12 h-12 mx-auto rounded-full bg-blue-500 text-white flex items-center justify-center font-bold mb-2">1</div>
93
+ <span class="text-sm font-medium text-gray-700">Book Details</span>
94
+ </div>
95
+ <div class="progress-step text-center w-1/6" id="step2-indicator">
96
+ <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 text-gray-600 flex items-center justify-center font-bold mb-2">2</div>
97
+ <span class="text-sm font-medium text-gray-500">Table of Contents</span>
98
+ </div>
99
+ <div class="progress-step text-center w-1/6" id="step3-indicator">
100
+ <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 text-gray-600 flex items-center justify-center font-bold mb-2">3</div>
101
+ <span class="text-sm font-medium text-gray-500">Recipe Format</span>
102
+ </div>
103
+ <div class="progress-step text-center w-1/6" id="step4-indicator">
104
+ <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 text-gray-600 flex items-center justify-center font-bold mb-2">4</div>
105
+ <span class="text-sm font-medium text-gray-500">Generate Recipes</span>
106
+ </div>
107
+ <div class="progress-step text-center w-1/6" id="step5-indicator">
108
+ <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 text-gray-600 flex items-center justify-center font-bold mb-2">5</div>
109
+ <span class="text-sm font-medium text-gray-500">Front/Back Matter</span>
110
+ </div>
111
+ <div class="progress-step text-center w-1/6" id="step6-indicator">
112
+ <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 text-gray-600 flex items-center justify-center font-bold mb-2">6</div>
113
+ <span class="text-sm font-medium text-gray-500">Export</span>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Main Content Area -->
118
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
119
+ <!-- Step 1: Book Details -->
120
+ <div id="step1" class="step-content fade-in">
121
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">1. Enter Cookbook Details</h2>
122
+ <div class="mb-6">
123
+ <label for="book-title" class="block text-sm font-medium text-gray-700 mb-1">Cookbook Title</label>
124
+ <input type="text" id="book-title" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="e.g., Mediterranean Cooking Made Easy">
125
+ </div>
126
+
127
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
128
+ <div>
129
+ <label for="recipe-count" class="block text-sm font-medium text-gray-700 mb-1">Total Number of Recipes</label>
130
+ <input type="number" id="recipe-count" min="1" max="200" value="50" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
131
+ </div>
132
+ <div>
133
+ <label for="chapter-count" class="block text-sm font-medium text-gray-700 mb-1">Number of Chapters</label>
134
+ <input type="number" id="chapter-count" min="1" max="20" value="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
135
+ </div>
136
+ </div>
137
+
138
+ <div class="flex justify-end">
139
+ <button id="next-to-step2" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Next: Generate TOC <i class="fas fa-arrow-right ml-2"></i></button>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Step 2: Table of Contents -->
144
+ <div id="step2" class="step-content hidden">
145
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">2. Generate Table of Contents</h2>
146
+ <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
147
+ <p class="text-blue-800">We'll use GPT-4 to create a structured table of contents based on your recipe count and chapter count.</p>
148
+ </div>
149
+
150
+ <div class="mb-6">
151
+ <label for="book-theme" class="block text-sm font-medium text-gray-700 mb-1">Optional: Cookbook Theme/Cuisine</label>
152
+ <input type="text" id="book-theme" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="e.g., Italian, Vegan, Quick Meals">
153
+ </div>
154
+
155
+ <div class="flex justify-between mb-6">
156
+ <button id="back-to-step1" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"><i class="fas fa-arrow-left mr-2"></i> Back</button>
157
+ <button id="generate-toc" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center">
158
+ <span id="generate-toc-text">Generate TOC</span>
159
+ <span id="generate-toc-spinner" class="hidden ml-2">
160
+ <i class="fas fa-spinner fa-spin"></i>
161
+ </span>
162
+ </button>
163
+ </div>
164
+
165
+ <div id="toc-results" class="hidden">
166
+ <h3 class="text-xl font-semibold text-gray-700 mb-4">Generated Table of Contents</h3>
167
+ <div id="toc-preview" class="border border-gray-200 rounded-lg p-4 mb-6 bg-gray-50"></div>
168
+
169
+ <div class="flex justify-between">
170
+ <button id="regenerate-toc" class="px-6 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors flex items-center">
171
+ <i class="fas fa-sync-alt mr-2"></i> Regenerate
172
+ </button>
173
+ <button id="next-to-step3" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Next: Recipe Format <i class="fas fa-arrow-right ml-2"></i></button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Step 3: Recipe Format -->
179
+ <div id="step3" class="step-content hidden">
180
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">3. Define Recipe Format</h2>
181
+
182
+ <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
183
+ <p class="text-blue-800">Define the structure for each recipe in your cookbook. You can use our default format or customize it.</p>
184
+ </div>
185
+
186
+ <div class="mb-6">
187
+ <div class="flex items-center mb-4">
188
+ <input type="radio" id="default-format" name="recipe-format" value="default" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500">
189
+ <label for="default-format" class="ml-2 block text-sm font-medium text-gray-700">Use Default Recipe Format</label>
190
+ </div>
191
+
192
+ <div class="flex items-center mb-4">
193
+ <input type="radio" id="custom-format" name="recipe-format" value="custom" class="h-4 w-4 text-blue-600 focus:ring-blue-500">
194
+ <label for="custom-format" class="ml-2 block text-sm font-medium text-gray-700">Customize Recipe Format</label>
195
+ </div>
196
+
197
+ <div id="custom-format-container" class="hidden mt-4">
198
+ <label for="recipe-template" class="block text-sm font-medium text-gray-700 mb-1">Recipe Template (Markdown format)</label>
199
+ <textarea id="recipe-template" rows="12" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"># {Recipe Name}
200
+
201
+ ## Description
202
+ {2-3 sentence description of the recipe, its origins, and why readers will love it}
203
+
204
+ ## Ingredients
205
+ - {Ingredient 1} - {Quantity}
206
+ - {Ingredient 2} - {Quantity}
207
+ - ... (list all ingredients)
208
+
209
+ ## Instructions
210
+ 1. {Step 1}
211
+ 2. {Step 2}
212
+ 3. ... (detailed steps)
213
+
214
+ ## Tips & Variations
215
+ - {Tip 1}
216
+ - {Tip 2}
217
+ - {Variation suggestion}
218
+
219
+ ## Nutrition Information (per serving)
220
+ - Calories: {number}
221
+ - Protein: {number}g
222
+ - Carbs: {number}g
223
+ - Fat: {number}g</textarea>
224
+ <p class="text-sm text-gray-500 mt-1">Use placeholders like {Recipe Name} that will be filled by the AI.</p>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="flex justify-between">
229
+ <button id="back-to-step2" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"><i class="fas fa-arrow-left mr-2"></i> Back</button>
230
+ <button id="next-to-step4" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Next: Generate Recipes <i class="fas fa-arrow-right ml-2"></i></button>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Step 4: Generate Recipes -->
235
+ <div id="step4" class="step-content hidden">
236
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">4. Generate Recipes</h2>
237
+
238
+ <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
239
+ <p class="text-blue-800">We'll generate recipes in batches of 10. You can review and regenerate individual recipes as needed.</p>
240
+ </div>
241
+
242
+ <div class="mb-6">
243
+ <label for="recipe-batch-select" class="block text-sm font-medium text-gray-700 mb-1">Select Chapter to Generate</label>
244
+ <select id="recipe-batch-select" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
245
+ <!-- Filled dynamically -->
246
+ </select>
247
+ </div>
248
+
249
+ <div class="flex justify-between mb-6">
250
+ <button id="back-to-step3" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"><i class="fas fa-arrow-left mr-2"></i> Back</button>
251
+ <button id="generate-recipes" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center">
252
+ <span id="generate-recipes-text">Generate Recipes</span>
253
+ <span id="generate-recipes-spinner" class="hidden ml-2">
254
+ <i class="fas fa-spinner fa-spin"></i>
255
+ </span>
256
+ </button>
257
+ </div>
258
+
259
+ <div id="recipe-results" class="hidden">
260
+ <h3 class="text-xl font-semibold text-gray-700 mb-4">Generated Recipes</h3>
261
+ <div id="recipe-list" class="space-y-6"></div>
262
+
263
+ <div class="flex justify-between mt-6">
264
+ <button id="regenerate-recipes" class="px-6 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors flex items-center">
265
+ <i class="fas fa-sync-alt mr-2"></i> Regenerate All
266
+ </button>
267
+ <button id="next-to-step5" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Next: Front/Back Matter <i class="fas fa-arrow-right ml-2"></i></button>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Step 5: Front & Back Matter -->
273
+ <div id="step5" class="step-content hidden">
274
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">5. Add Front & Back Matter</h2>
275
+
276
+ <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
277
+ <p class="text-blue-800">Generate additional book sections like introduction, pantry essentials, and conclusion.</p>
278
+ </div>
279
+
280
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
281
+ <div class="border border-gray-200 rounded-lg p-4">
282
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">Front Matter</h3>
283
+ <div class="space-y-3">
284
+ <div class="flex items-center">
285
+ <input type="checkbox" id="generate-intro" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500">
286
+ <label for="generate-intro" class="ml-2 block text-sm font-medium text-gray-700">Introduction (~1000 words)</label>
287
+ </div>
288
+ <div class="flex items-center">
289
+ <input type="checkbox" id="generate-pantry" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500">
290
+ <label for="generate-pantry" class="ml-2 block text-sm font-medium text-gray-700">Pantry Essentials (~1000 words)</label>
291
+ </div>
292
+ <div class="flex items-center">
293
+ <input type="checkbox" id="generate-tips" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500">
294
+ <label for="generate-tips" class="ml-2 block text-sm font-medium text-gray-700">Cooking Tips (~800 words)</label>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="border border-gray-200 rounded-lg p-4">
300
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">Back Matter</h3>
301
+ <div class="space-y-3">
302
+ <div class="flex items-center">
303
+ <input type="checkbox" id="generate-conclusion" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500">
304
+ <label for="generate-conclusion" class="ml-2 block text-sm font-medium text-gray-700">Conclusion (~800 words)</label>
305
+ </div>
306
+ <div class="flex items-center">
307
+ <input type="checkbox" id="generate-index" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500">
308
+ <label for="generate-index" class="ml-2 block text-sm font-medium text-gray-700">Recipe Index</label>
309
+ </div>
310
+ <div class="flex items-center">
311
+ <input type="checkbox" id="generate-conversion" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500">
312
+ <label for="generate-conversion" class="ml-2 block text-sm font-medium text-gray-700">Measurement Conversions</label>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="flex justify-between mb-6">
319
+ <button id="back-to-step4" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"><i class="fas fa-arrow-left mr-2"></i> Back</button>
320
+ <button id="generate-matter" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center">
321
+ <span id="generate-matter-text">Generate Sections</span>
322
+ <span id="generate-matter-spinner" class="hidden ml-2">
323
+ <i class="fas fa-spinner fa-spin"></i>
324
+ </span>
325
+ </button>
326
+ </div>
327
+
328
+ <div id="matter-results" class="hidden">
329
+ <h3 class="text-xl font-semibold text-gray-700 mb-4">Generated Sections</h3>
330
+ <div id="matter-preview" class="space-y-6"></div>
331
+
332
+ <div class="flex justify-between mt-6">
333
+ <button id="regenerate-matter" class="px-6 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors flex items-center">
334
+ <i class="fas fa-sync-alt mr-2"></i> Regenerate All
335
+ </button>
336
+ <button id="next-to-step6" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Next: Preview & Export <i class="fas fa-arrow-right ml-2"></i></button>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Step 6: Export -->
342
+ <div id="step6" class="step-content hidden">
343
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">6. Preview & Export Cookbook</h2>
344
+
345
+ <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
346
+ <p class="text-blue-800">Preview your complete cookbook and export it in your preferred format.</p>
347
+ </div>
348
+
349
+ <div class="mb-6">
350
+ <label for="export-options" class="block text-sm font-medium text-gray-700 mb-2">Export Options</label>
351
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
352
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 hover:bg-blue-50 transition-colors cursor-pointer export-option" data-format="full-pdf">
353
+ <div class="flex items-center">
354
+ <div class="p-2 bg-red-100 rounded-full mr-3">
355
+ <i class="fas fa-file-pdf text-red-500"></i>
356
+ </div>
357
+ <div>
358
+ <h4 class="font-medium text-gray-800">Full Cookbook (PDF)</h4>
359
+ <p class="text-sm text-gray-500">Single PDF file</p>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 hover:bg-blue-50 transition-colors cursor-pointer export-option" data-format="full-docx">
364
+ <div class="flex items-center">
365
+ <div class="p-2 bg-blue-100 rounded-full mr-3">
366
+ <i class="fas fa-file-word text-blue-500"></i>
367
+ </div>
368
+ <div>
369
+ <h4 class="font-medium text-gray-800">Full Cookbook (Word)</h4>
370
+ <p class="text-sm text-gray-500">Single .docx file</p>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 hover:bg-blue-50 transition-colors cursor-pointer export-option" data-format="chapter-docx">
375
+ <div class="flex items-center">
376
+ <div class="p-2 bg-green-100 rounded-full mr-3">
377
+ <i class="fas fa-folder text-green-500"></i>
378
+ </div>
379
+ <div>
380
+ <h4 class="font-medium text-gray-800">By Chapter (Word)</h4>
381
+ <p class="text-sm text-gray-500">ZIP with separate files</p>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="mb-6">
389
+ <label for="book-settings" class="block text-sm font-medium text-gray-700 mb-2">Book Settings</label>
390
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
391
+ <div>
392
+ <label for="book-size" class="block text-sm font-medium text-gray-700 mb-1">Book Size</label>
393
+ <select id="book-size" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
394
+ <option value="6x9">6" x 9" (Standard)</option>
395
+ <option value="5.5x8.5">5.5" x 8.5"</option>
396
+ <option value="8x10">8" x 10"</option>
397
+ </select>
398
+ </div>
399
+ <div>
400
+ <label for="font-family" class="block text-sm font-medium text-gray-700 mb-1">Font</label>
401
+ <select id="font-family" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
402
+ <option value="times">Times New Roman</option>
403
+ <option value="arial">Arial</option>
404
+ <option value="georgia">Georgia</option>
405
+ <option value="garamond">Garamond</option>
406
+ </select>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <div class="flex justify-between">
412
+ <button id="back-to-step5" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"><i class="fas fa-arrow-left mr-2"></i> Back</button>
413
+ <button id="export-book" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center">
414
+ <span id="export-book-text">Export Cookbook</span>
415
+ <span id="export-book-spinner" class="hidden ml-2">
416
+ <i class="fas fa-spinner fa-spin"></i>
417
+ </span>
418
+ </button>
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <!-- Preview Modal -->
424
+ <div id="preview-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
425
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col">
426
+ <div class="flex justify-between items-center border-b border-gray-200 px-6 py-4">
427
+ <h3 class="text-xl font-bold text-gray-800">Cookbook Preview</h3>
428
+ <button id="close-preview" class="text-gray-500 hover:text-gray-700">
429
+ <i class="fas fa-times"></i>
430
+ </button>
431
+ </div>
432
+ <div class="p-6 overflow-y-auto flex-grow">
433
+ <div id="full-preview-content" class="prose max-w-none markdown-content"></div>
434
+ </div>
435
+ <div class="border-t border-gray-200 px-6 py-4 flex justify-end">
436
+ <button id="export-from-preview" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
437
+ Export Now
438
+ </button>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <script>
445
+ // Sample data structure to store the cookbook
446
+ const cookbook = {
447
+ title: '',
448
+ recipeCount: 0,
449
+ chapterCount: 0,
450
+ theme: '',
451
+ toc: [],
452
+ recipeFormat: '',
453
+ recipes: {},
454
+ frontMatter: {},
455
+ backMatter: {}
456
+ };
457
+
458
+ // DOM Elements
459
+ const stepContents = document.querySelectorAll('.step-content');
460
+ const stepIndicators = document.querySelectorAll('.progress-step');
461
+
462
+ // Navigation functions
463
+ function showStep(stepNumber) {
464
+ // Hide all steps
465
+ stepContents.forEach(step => step.classList.add('hidden'));
466
+ stepContents.forEach(step => step.classList.remove('fade-in'));
467
+
468
+ // Show current step
469
+ const currentStep = document.getElementById(`step${stepNumber}`);
470
+ currentStep.classList.remove('hidden');
471
+ setTimeout(() => {
472
+ currentStep.classList.add('fade-in');
473
+ }, 10);
474
+
475
+ // Update progress indicators
476
+ stepIndicators.forEach((indicator, index) => {
477
+ if (index < stepNumber) {
478
+ indicator.classList.add('active');
479
+ indicator.querySelector('div').classList.remove('bg-gray-200', 'text-gray-600');
480
+ indicator.querySelector('div').classList.add('bg-blue-500', 'text-white');
481
+ indicator.querySelector('span').classList.remove('text-gray-500');
482
+ indicator.querySelector('span').classList.add('text-gray-700');
483
+ } else {
484
+ indicator.classList.remove('active');
485
+ indicator.querySelector('div').classList.add('bg-gray-200', 'text-gray-600');
486
+ indicator.querySelector('div').classList.remove('bg-blue-500', 'text-white');
487
+ indicator.querySelector('span').classList.add('text-gray-500');
488
+ indicator.querySelector('span').classList.remove('text-gray-700');
489
+ }
490
+ });
491
+
492
+ // Scroll to top
493
+ window.scrollTo({ top: 0, behavior: 'smooth' });
494
+ }
495
+
496
+ // Step 1: Book Details
497
+ document.getElementById('next-to-step2').addEventListener('click', () => {
498
+ const title = document.getElementById('book-title').value.trim();
499
+ const recipeCount = parseInt(document.getElementById('recipe-count').value);
500
+ const chapterCount = parseInt(document.getElementById('chapter-count').value);
501
+
502
+ if (!title) {
503
+ alert('Please enter a cookbook title');
504
+ return;
505
+ }
506
+
507
+ if (recipeCount < 1 || chapterCount < 1) {
508
+ alert('Recipe count and chapter count must be at least 1');
509
+ return;
510
+ }
511
+
512
+ cookbook.title = title;
513
+ cookbook.recipeCount = recipeCount;
514
+ cookbook.chapterCount = chapterCount;
515
+
516
+ showStep(2);
517
+ });
518
+
519
+ // Step 2: Table of Contents
520
+ document.getElementById('back-to-step1').addEventListener('click', () => showStep(1));
521
+
522
+ document.getElementById('generate-toc').addEventListener('click', () => {
523
+ const theme = document.getElementById('book-theme').value.trim();
524
+ cookbook.theme = theme;
525
+
526
+ // Show loading state
527
+ document.getElementById('generate-toc-text').classList.add('hidden');
528
+ document.getElementById('generate-toc-spinner').classList.remove('hidden');
529
+
530
+ // Simulate API call with timeout
531
+ setTimeout(() => {
532
+ // Generate sample TOC
533
+ cookbook.toc = generateSampleTOC(cookbook.chapterCount, cookbook.recipeCount, cookbook.theme);
534
+
535
+ // Display TOC
536
+ displayTOCPreview();
537
+
538
+ // Hide loading state
539
+ document.getElementById('generate-toc-text').classList.remove('hidden');
540
+ document.getElementById('generate-toc-spinner').classList.add('hidden');
541
+
542
+ // Show results
543
+ document.getElementById('toc-results').classList.remove('hidden');
544
+ }, 1500);
545
+ });
546
+
547
+ document.getElementById('regenerate-toc').addEventListener('click', () => {
548
+ // Show loading state
549
+ document.getElementById('generate-toc-text').classList.add('hidden');
550
+ document.getElementById('generate-toc-spinner').classList.remove('hidden');
551
+
552
+ // Simulate API call with timeout
553
+ setTimeout(() => {
554
+ // Generate new sample TOC
555
+ cookbook.toc = generateSampleTOC(cookbook.chapterCount, cookbook.recipeCount, cookbook.theme);
556
+
557
+ // Display TOC
558
+ displayTOCPreview();
559
+
560
+ // Hide loading state
561
+ document.getElementById('generate-toc-text').classList.remove('hidden');
562
+ document.getElementById('generate-toc-spinner').classList.add('hidden');
563
+ }, 1500);
564
+ });
565
+
566
+ document.getElementById('next-to-step3').addEventListener('click', () => showStep(3));
567
+
568
+ function generateSampleTOC(chapterCount, recipeCount, theme = '') {
569
+ const chapters = [];
570
+ const recipesPerChapter = Math.floor(recipeCount / chapterCount);
571
+ const remainingRecipes = recipeCount % chapterCount;
572
+
573
+ const chapterThemes = getChapterThemes(chapterCount, theme);
574
+
575
+ for (let i = 0; i < chapterCount; i++) {
576
+ const chapterRecipes = [];
577
+ const currentRecipeCount = recipesPerChapter + (i < remainingRecipes ? 1 : 0);
578
+
579
+ for (let j = 0; j < currentRecipeCount; j++) {
580
+ chapterRecipes.push(`Recipe ${j + 1} - ${generateRecipeName(chapterThemes[i])}`);
581
+ }
582
+
583
+ chapters.push({
584
+ title: chapterThemes[i],
585
+ recipes: chapterRecipes
586
+ });
587
+ }
588
+
589
+ return chapters;
590
+ }
591
+
592
+ function getChapterThemes(count, mainTheme = '') {
593
+ const themes = {
594
+ 'Italian': ['Antipasti', 'Primi Piatti', 'Secondi Piatti', 'Contorni', 'Dolci'],
595
+ 'Mexican': ['Appetizers', 'Tacos & Enchiladas', 'Soups & Stews', 'Main Dishes', 'Desserts'],
596
+ 'Asian': ['Dim Sum & Appetizers', 'Noodle Dishes', 'Rice Dishes', 'Curries', 'Desserts'],
597
+ 'Mediterranean': ['Meze & Appetizers', 'Salads', 'Main Courses', 'Seafood', 'Desserts'],
598
+ 'Vegan': ['Breakfast', 'Soups & Salads', 'Main Dishes', 'Snacks', 'Desserts'],
599
+ 'default': ['Breakfast', 'Appetizers', 'Main Dishes', 'Side Dishes', 'Desserts']
600
+ };
601
+
602
+ if (mainTheme && themes[mainTheme]) {
603
+ return themes[mainTheme].slice(0, count);
604
+ }
605
+
606
+ // Extend default themes if more chapters needed
607
+ if (count > 5) {
608
+ const extended = [...themes.default];
609
+ for (let i = 5; i < count; i++) {
610
+ extended.push(`Chapter ${i + 1}`);
611
+ }
612
+ return extended.slice(0, count);
613
+ }
614
+
615
+ return themes.default.slice(0, count);
616
+ }
617
+
618
+ function generateRecipeName(chapterTheme) {
619
+ const recipeNames = {
620
+ 'Breakfast': ['Fluffy Pancakes', 'Avocado Toast', 'Berry Smoothie Bowl', 'Vegetable Omelette'],
621
+ 'Appetizers': ['Bruschetta', 'Stuffed Mushrooms', 'Spring Rolls', 'Deviled Eggs'],
622
+ 'Main Dishes': ['Chicken Parmesan', 'Beef Stir Fry', 'Vegetable Lasagna', 'Grilled Salmon'],
623
+ 'Side Dishes': ['Garlic Mashed Potatoes', 'Roasted Vegetables', 'Creamed Spinach', 'Herb Rice'],
624
+ 'Desserts': ['Chocolate Cake', 'Apple Pie', 'Tiramisu', 'Cheesecake']
625
+ };
626
+
627
+ for (const key in recipeNames) {
628
+ if (chapterTheme.includes(key)) {
629
+ return recipeNames[key][Math.floor(Math.random() * recipeNames[key].length)];
630
+ }
631
+ }
632
+
633
+ return 'Delicious Recipe';
634
+ }
635
+
636
+ function displayTOCPreview() {
637
+ const tocPreview = document.getElementById('toc-preview');
638
+ tocPreview.innerHTML = '';
639
+
640
+ cookbook.toc.forEach((chapter, index) => {
641
+ const chapterDiv = document.createElement('div');
642
+ chapterDiv.className = 'mb-4';
643
+
644
+ const chapterTitle = document.createElement('h4');
645
+ chapterTitle.className = 'font-bold text-lg text-gray-800 mb-2';
646
+ chapterTitle.textContent = `Chapter ${index + 1}: ${chapter.title}`;
647
+
648
+ const recipeList = document.createElement('ul');
649
+ recipeList.className = 'list-disc pl-5 space-y-1';
650
+
651
+ chapter.recipes.forEach(recipe => {
652
+ const recipeItem = document.createElement('li');
653
+ recipeItem.className = 'text-gray-700';
654
+ recipeItem.textContent = recipe;
655
+ recipeList.appendChild(recipeItem);
656
+ });
657
+
658
+ chapterDiv.appendChild(chapterTitle);
659
+ chapterDiv.appendChild(recipeList);
660
+ tocPreview.appendChild(chapterDiv);
661
+ });
662
+ }
663
+
664
+ // Step 3: Recipe Format
665
+ document.getElementById('back-to-step2').addEventListener('click', () => showStep(2));
666
+
667
+ document.getElementById('custom-format').addEventListener('change', function() {
668
+ if (this.checked) {
669
+ document.getElementById('custom-format-container').classList.remove('hidden');
670
+ }
671
+ });
672
+
673
+ document.getElementById('default-format').addEventListener('change', function() {
674
+ if (this.checked) {
675
+ document.getElementById('custom-format-container').classList.add('hidden');
676
+ }
677
+ });
678
+
679
+ document.getElementById('next-to-step4').addEventListener('click', () => {
680
+ const useDefaultFormat = document.getElementById('default-format').checked;
681
+
682
+ if (useDefaultFormat) {
683
+ cookbook.recipeFormat = `# {Recipe Name}
684
+
685
+ ## Description
686
+ {2-3 sentence description of the recipe, its origins, and why readers will love it}
687
+
688
+ ## Ingredients
689
+ - {Ingredient 1} - {Quantity}
690
+ - {Ingredient 2} - {Quantity}
691
+ - ... (list all ingredients)
692
+
693
+ ## Instructions
694
+ 1. {Step 1}
695
+ 2. {Step 2}
696
+ 3. ... (detailed steps)
697
+
698
+ ## Tips & Variations
699
+ - {Tip 1}
700
+ - {Tip 2}
701
+ - {Variation suggestion}
702
+
703
+ ## Nutrition Information (per serving)
704
+ - Calories: {number}
705
+ - Protein: {number}g
706
+ - Carbs: {number}g
707
+ - Fat: {number}g`;
708
+ } else {
709
+ cookbook.recipeFormat = document.getElementById('recipe-template').value;
710
+ }
711
+
712
+ // Initialize recipe storage
713
+ cookbook.recipes = {};
714
+ cookbook.toc.forEach(chapter => {
715
+ cookbook.recipes[chapter.title] = Array(chapter.recipes.length).fill(null);
716
+ });
717
+
718
+ // Populate chapter select for recipe generation
719
+ const select = document.getElementById('recipe-batch-select');
720
+ select.innerHTML = '';
721
+ cookbook.toc.forEach((chapter, index) => {
722
+ const option = document.createElement('option');
723
+ option.value = index;
724
+ option.textContent = `Chapter ${index + 1}: ${chapter.title} (${chapter.recipes.length} recipes)`;
725
+ select.appendChild(option);
726
+ });
727
+
728
+ showStep(4);
729
+ });
730
+
731
+ // Step 4: Generate Recipes
732
+ document.getElementById('back-to-step3').addEventListener('click', () => showStep(3));
733
+
734
+ document.getElementById('generate-recipes').addEventListener('click', () => {
735
+ const chapterIndex = parseInt(document.getElementById('recipe-batch-select').value);
736
+ const chapter = cookbook.toc[chapterIndex];
737
+
738
+ // Show loading state
739
+ document.getElementById('generate-recipes-text').classList.add('hidden');
740
+ document.getElementById('generate-recipes-spinner').classList.remove('hidden');
741
+
742
+ // Simulate API call with timeout
743
+ setTimeout(() => {
744
+ // Generate sample recipes for all recipes in the chapter
745
+ for (let i = 0; i < chapter.recipes.length; i++) {
746
+ if (!cookbook.recipes[chapter.title][i]) {
747
+ cookbook.recipes[chapter.title][i] = generateSampleRecipe(chapter.recipes[i]);
748
+ }
749
+ }
750
+
751
+ // Display recipes
752
+ displayRecipes(chapter.title);
753
+
754
+ // Hide loading state
755
+ document.getElementById('generate-recipes-text').classList.remove('hidden');
756
+ document.getElementById('generate-recipes-spinner').classList.add('hidden');
757
+
758
+ // Show results
759
+ document.getElementById('recipe-results').classList.remove('hidden');
760
+ }, 2000);
761
+ });
762
+
763
+ document.getElementById('regenerate-recipes').addEventListener('click', () => {
764
+ const chapterIndex = parseInt(document.getElementById('recipe-batch-select').value);
765
+ const chapter = cookbook.toc[chapterIndex];
766
+
767
+ // Show loading state
768
+ document.getElementById('generate-recipes-text').classList.add('hidden');
769
+ document.getElementById('generate-recipes-spinner').classList.remove('hidden');
770
+
771
+ // Simulate API call with timeout
772
+ setTimeout(() => {
773
+ // Generate new sample recipes for all recipes in the chapter
774
+ for (let i = 0; i < chapter.recipes.length; i++) {
775
+ cookbook.recipes[chapter.title][i] = generateSampleRecipe(chapter.recipes[i]);
776
+ }
777
+
778
+ // Display recipes
779
+ displayRecipes(chapter.title);
780
+
781
+ // Hide loading state
782
+ document.getElementById('generate-recipes-text').classList.remove('hidden');
783
+ document.getElementById('generate-recipes-spinner').classList.add('hidden');
784
+ }, 2000);
785
+ });
786
+
787
+ document.getElementById('next-to-step5').addEventListener('click', () => showStep(5));
788
+
789
+ function generateSampleRecipe(recipeName) {
790
+ const recipeNameOnly = recipeName.split(' - ')[1] || recipeName;
791
+ const steps = [
792
+ "Prepare all ingredients as listed",
793
+ "Preheat oven to 375°F (190°C) if baking is required",
794
+ "Combine dry ingredients in a large mixing bowl",
795
+ "Whisk together wet ingredients in a separate bowl",
796
+ "Gradually add wet ingredients to dry ingredients while stirring",
797
+ "Mix until just combined (do not overmix)",
798
+ "Pour batter into prepared baking dish if needed",
799
+ "Bake for 25-30 minutes until golden brown",
800
+ "Let cool for 5-10 minutes before serving",
801
+ "Garnish with fresh herbs or toppings as desired"
802
+ ];
803
+
804
+ // Randomly select 4-8 steps for variety
805
+ const selectedSteps = [];
806
+ const numSteps = 4 + Math.floor(Math.random() * 4);
807
+ const stepIndices = Array.from({length: steps.length}, (_, i) => i)
808
+ .sort(() => Math.random() - 0.5)
809
+ .slice(0, numSteps)
810
+ .sort((a, b) => a - b);
811
+
812
+ stepIndices.forEach((index, i) => {
813
+ selectedSteps.push(`${i + 1}. ${steps[index]}`);
814
+ });
815
+
816
+ return `# ${recipeNameOnly}
817
+
818
+ ## Description
819
+ ${recipeNameOnly} is a delicious dish that combines fresh ingredients with simple techniques to create a meal that's both satisfying and flavorful. This recipe has been passed down through generations and is perfect for weeknight dinners or special occasions.
820
+
821
+ ## Ingredients
822
+ - 2 cups all-purpose flour
823
+ - 1 teaspoon salt
824
+ - 1 tablespoon sugar
825
+ - 1 packet active dry yeast
826
+ - 3/4 cup warm water
827
+ - 2 tablespoons olive oil
828
+ - 1 cup tomato sauce
829
+ - 2 cups shredded mozzarella cheese
830
+ - Assorted toppings (pepperoni, mushrooms, bell peppers, etc.)
831
+
832
+ ## Instructions
833
+ ${selectedSteps.join('\n')}
834
+
835
+ ## Tips & Variations
836
+ - For a crispier crust, pre-bake the dough for 5 minutes before adding toppings
837
+ - Try using whole wheat flour for a healthier alternative
838
+ - Add fresh basil after baking for extra flavor
839
+
840
+ ## Nutrition Information (per serving)
841
+ - Calories: 350
842
+ - Protein: 15g
843
+ - Carbs: 45g
844
+ - Fat: 12g`;
845
+ }
846
+
847
+ function displayRecipes(chapterTitle) {
848
+ const recipeList = document.getElementById('recipe-list');
849
+ recipeList.innerHTML = '';
850
+
851
+ cookbook.recipes[chapterTitle].forEach((recipe, index) => {
852
+ if (!recipe) return;
853
+
854
+ const recipeCard = document.createElement('div');
855
+ recipeCard.className = 'recipe-card bg-white border border-gray-200 rounded-lg p-6 shadow-sm';
856
+
857
+ const recipeHeader = document.createElement('div');
858
+ recipeHeader.className = 'flex justify-between items-start mb-4';
859
+
860
+ const recipeTitle = document.createElement('h3');
861
+ recipeTitle.className = 'text-xl font-bold text-gray-800';
862
+ recipeTitle.textContent = cookbook.toc.find(c => c.title === chapterTitle).recipes[index];
863
+
864
+ const regenerateBtn = document.createElement('button');
865
+ regenerateBtn.className = 'px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200 transition-colors';
866
+ regenerateBtn.innerHTML = '<i class="fas fa-sync-alt mr-1"></i> Regenerate';
867
+ regenerateBtn.addEventListener('click', () => regenerateSingleRecipe(chapterTitle, index));
868
+
869
+ recipeHeader.appendChild(recipeTitle);
870
+ recipeHeader.appendChild(regenerateBtn);
871
+
872
+ const recipeContent = document.createElement('div');
873
+ recipeContent.className = 'prose max-w-none markdown-content';
874
+ recipeContent.innerHTML = marked.parse(recipe);
875
+
876
+ recipeCard.appendChild(recipeHeader);
877
+ recipeCard.appendChild(recipeContent);
878
+ recipeList.appendChild(recipeCard);
879
+ });
880
+ }
881
+
882
+ function regenerateSingleRecipe(chapterTitle, recipeIndex) {
883
+ const recipeName = cookbook.toc.find(c => c.title === chapterTitle).recipes[recipeIndex];
884
+
885
+ // Show loading state for this recipe
886
+ const recipeCards = document.querySelectorAll('.recipe-card');
887
+ const currentCard = recipeCards[recipeIndex];
888
+ currentCard.style.opacity = '0.5';
889
+ currentCard.querySelector('button').innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Regenerating';
890
+
891
+ // Simulate API call with timeout
892
+ setTimeout(() => {
893
+ cookbook.recipes[chapterTitle][recipeIndex] = generateSampleRecipe(recipeName);
894
+
895
+ // Update display
896
+ const recipeContent = currentCard.querySelector('.prose');
897
+ recipeContent.innerHTML = marked.parse(cookbook.recipes[chapterTitle][recipeIndex]);
898
+
899
+ // Restore card
900
+ currentCard.style.opacity = '1';
901
+ currentCard.querySelector('button').innerHTML = '<i class="fas fa-sync-alt mr-1"></i> Regenerate';
902
+ }, 1000);
903
+ }
904
+
905
+ // Step 5: Front & Back Matter
906
+ document.getElementById('back-to-step4').addEventListener('click', () => showStep(4));
907
+
908
+ document.getElementById('generate-matter').addEventListener('click', () => {
909
+ // Show loading state
910
+ document.getElementById('generate-matter-text').classList.add('hidden');
911
+ document.getElementById('generate-matter-spinner').classList.remove('hidden');
912
+
913
+ // Simulate API call with timeout
914
+ setTimeout(() => {
915
+ // Generate sample content
916
+ cookbook.frontMatter = {
917
+ introduction: generateSectionContent('Introduction', cookbook.theme),
918
+ pantry: generateSectionContent('Pantry Essentials', cookbook.theme),
919
+ tips: generateSectionContent('Cooking Tips', cookbook.theme)
920
+ };
921
+
922
+ cookbook.backMatter = {
923
+ conclusion: generateSectionContent('Conclusion', cookbook.theme),
924
+ index: generateRecipeIndex(),
925
+ conversions: generateConversionChart()
926
+ };
927
+
928
+ // Display content
929
+ displayMatterContent();
930
+
931
+ // Hide loading state
932
+ document.getElementById('generate-matter-text').classList.remove('hidden');
933
+ document.getElementById('generate-matter-spinner').classList.add('hidden');
934
+
935
+ // Show results
936
+ document.getElementById('matter-results').classList.remove('hidden');
937
+ }, 2000);
938
+ });
939
+
940
+ document.getElementById('regenerate-matter').addEventListener('click', () => {
941
+ // Show loading state
942
+ document.getElementById('generate-matter-text').classList.add('hidden');
943
+ document.getElementById('generate-matter-spinner').classList.remove('hidden');
944
+
945
+ // Simulate API call with timeout
946
+ setTimeout(() => {
947
+ // Generate new sample content
948
+ cookbook.frontMatter = {
949
+ introduction: generateSectionContent('Introduction', cookbook.theme),
950
+ pantry: generateSectionContent('Pantry Essentials', cookbook.theme),
951
+ tips: generateSectionContent('Cooking Tips', cookbook.theme)
952
+ };
953
+
954
+ cookbook.backMatter = {
955
+ conclusion: generateSectionContent('Conclusion', cookbook.theme),
956
+ index: generateRecipeIndex(),
957
+ conversions: generateConversionChart()
958
+ };
959
+
960
+ // Display content
961
+ displayMatterContent();
962
+
963
+ // Hide loading state
964
+ document.getElementById('generate-matter-text').classList.remove('hidden');
965
+ document.getElementById('generate-matter-spinner').classList.add('hidden');
966
+ }, 2000);
967
+ });
968
+
969
+ document.getElementById('next-to-step6').addEventListener('click', () => showStep(6));
970
+
971
+ function generateSectionContent(title, theme = '') {
972
+ if (title === 'Introduction') {
973
+ return `# Introduction
974
+
975
+ Welcome to "${cookbook.title}", your comprehensive guide to ${theme ? theme.toLowerCase() + ' cooking' : 'delicious recipes'}. This cookbook is designed to help you create amazing dishes with ease, whether you're a beginner or an experienced cook.
976
+
977
+ ## About This Book
978
+
979
+ In these pages, you'll find a carefully curated collection of recipes that ${theme ? 'celebrate the flavors of ' + theme : 'span a wide range of cuisines and techniques'}. Each recipe has been tested to ensure success in your kitchen, with clear instructions and helpful tips.
980
+
981
+ ## How to Use This Cookbook
982
+
983
+ 1. **Start Simple**: Begin with the easier recipes to build confidence
984
+ 2. **Read Through First**: Always review the entire recipe before starting
985
+ 3. **Prep Ahead**: Measure ingredients before you begin cooking
986
+ 4. **Experiment**: Once comfortable, try variations and substitutions
987
+
988
+ We hope this book becomes a trusted resource in your kitchen, inspiring many memorable meals with family and friends. Happy cooking!`;
989
+ } else if (title === 'Pantry Essentials') {
990
+ return `# Pantry Essentials
991
+
992
+ Having a well-stocked pantry makes cooking easier and more enjoyable. Here are the essential ingredients we recommend keeping on hand for ${theme ? theme.toLowerCase() + ' cooking' : 'the recipes in this book'}.
993
+
994
+ ## Dry Goods
995
+ - All-purpose flour
996
+ - Granulated sugar
997
+ - Brown sugar
998
+ - Baking powder
999
+ - Baking soda
1000
+ - Cornstarch
1001
+ - Rice (white and brown)
1002
+ - Pasta (various shapes)
1003
+ - Dried beans and lentils
1004
+
1005
+ ## Oils & Vinegars
1006
+ - Extra virgin olive oil
1007
+ - Neutral oil (like canola or vegetable)
1008
+ - Toasted sesame oil
1009
+ - Balsamic vinegar
1010
+ - Red wine vinegar
1011
+ - Rice vinegar
1012
+
1013
+ ## Spices & Herbs
1014
+ ${theme === 'Italian' ? '- Dried oregano\n- Dried basil\n- Red pepper flakes\n- Garlic powder\n- Fennel seeds' :
1015
+ theme === 'Mexican' ? '- Ground cumin\n- Chili powder\n- Smoked paprika\n- Dried oregano\n- Cayenne pepper' :
1016
+ '- Ground cumin\n- Paprika\n- Garlic powder\n- Onion powder\n- Dried thyme\n- Bay leaves'}
1017
+
1018
+ ## Canned Goods
1019
+ - Tomatoes (diced, crushed, and paste)
1020
+ - Coconut milk
1021
+ - Broths (chicken, vegetable, beef)
1022
+ - Canned beans (chickpeas, black beans, etc.)
1023
+ - Tuna or salmon (in water)`;
1024
+ } else if (title === 'Cooking Tips') {
1025
+ return `# Cooking Tips
1026
+
1027
+ These professional techniques will help you get the best results from your ${theme ? theme.toLowerCase() + ' recipes' : 'cooking'}.
1028
+
1029
+ ## Knife Skills
1030
+ 1. **Keep knives sharp**: A sharp knife is safer than a dull one
1031
+ 2. **Use the right knife**: Chef's knife for most tasks, paring for detail work
1032
+ 3. **Claw grip**: Curl fingers under when chopping to protect them
1033
+ 4. **Rocking motion**: Use the full length of the blade for efficient chopping
1034
+
1035
+ ## Cooking Methods
1036
+ - **Searing**: Get the pan hot before adding food for better browning
1037
+ - **Simmering**: Keep liquids at a gentle bubble, not a rolling boil
1038
+ - **Resting meat**: Let cooked meat rest before slicing to retain juices
1039
+ - **Tasting as you go**: Adjust seasoning throughout the cooking process
1040
+
1041
+ ## Time-Saving Tricks
1042
+ 1. **Mise en place**: Prepare all ingredients before starting to cook
1043
+ 2. **Batch cooking**: Make double portions and freeze half
1044
+ 3. **Multitask**: Start longer-cooking items first
1045
+ 4. **Clean as you go**: Wash tools while waiting for things to cook`;
1046
+ } else if (title === 'Conclusion') {
1047
+ return `# Conclusion
1048
+
1049
+ Congratulations on completing your journey through "${cookbook.title}"! We hope you've enjoyed exploring ${theme ? 'the flavors of ' + theme : 'these diverse recipes'} and have discovered new favorite dishes along the way.
1050
+
1051
+ ## Final Thoughts
1052
+
1053
+ Cooking is an ongoing adventure, and each meal is an opportunity to learn and grow. Don't be discouraged by mistakes—they're valuable lessons that make you a better cook. The recipes in this book are just the beginning; feel free to adapt them to your taste and experiment with new ingredients.
1054
+
1055
+ ## Share the Joy
1056
+
1057
+ Some of life's best moments happen around the table. Share your culinary creations with others, teach someone to cook, and most importantly, savor the process as much as the results.
1058
+
1059
+ Happy cooking, and may your kitchen always be filled with delicious aromas and joyful moments!`;
1060
+ } else if (title === 'Recipe Index') {
1061
+ return `# Recipe Index
1062
+
1063
+ ## By Chapter
1064
+ ${cookbook.toc.map(chapter => `### ${chapter.title}\n${chapter.recipes.map(r => `- ${r}`).join('\n')}`).join('\n\n')}
1065
+
1066
+ ## By Category
1067
+ ### Appetizers
1068
+ - Recipe 1 - Bruschetta
1069
+ - Recipe 2 - Stuffed Mushrooms
1070
+
1071
+ ### Main Dishes
1072
+ - Recipe 3 - Chicken Parmesan
1073
+ - Recipe 4 - Vegetable Lasagna
1074
+
1075
+ ### Desserts
1076
+ - Recipe 5 - Chocolate Cake
1077
+ - Recipe 6 - Tiramisu`;
1078
+ } else if (title === 'Measurement Conversions') {
1079
+ return `# Measurement Conversions
1080
+
1081
+ ## Volume
1082
+ | Metric | Imperial |
1083
+ |--------|----------|
1084
+ | 5 ml | 1 tsp |
1085
+ | 15 ml | 1 tbsp |
1086
+ | 240 ml | 1 cup |
1087
+ | 1 liter| 4.2 cups |
1088
+
1089
+ ## Weight
1090
+ | Metric | Imperial |
1091
+ |--------|----------|
1092
+ | 28 g | 1 oz |
1093
+ | 454 g | 1 lb |
1094
+ | 1 kg | 2.2 lb |
1095
+
1096
+ ## Oven Temperatures
1097
+ | °C | °F |
1098
+ |-----|-------|
1099
+ | 120 | 250 |
1100
+ | 150 | 300 |
1101
+ | 180 | 350 |
1102
+ | 200 | 400 |
1103
+ | 220 | 425 |
1104
+ | 240 | 475 |`;
1105
+ }
1106
+
1107
+ return `# ${title}\n\nSample content for ${title} section.`;
1108
+ }
1109
+
1110
+ function generateRecipeIndex() {
1111
+ let indexContent = `# Recipe Index\n\n`;
1112
+
1113
+ // By Chapter
1114
+ indexContent += `## By Chapter\n`;
1115
+ cookbook.toc.forEach(chapter => {
1116
+ indexContent += `### ${chapter.title}\n`;
1117
+ chapter.recipes.forEach(recipe => {
1118
+ indexContent += `- ${recipe}\n`;
1119
+ });
1120
+ indexContent += `\n`;
1121
+ });
1122
+
1123
+ // By Category (simplified)
1124
+ indexContent += `## By Category\n`;
1125
+ indexContent += `### Main Dishes\n`;
1126
+ cookbook.toc.slice(0, 3).forEach(chapter => {
1127
+ chapter.recipes.slice(0, 2).forEach(recipe => {
1128
+ indexContent += `- ${recipe}\n`;
1129
+ });
1130
+ });
1131
+
1132
+ indexContent += `\n### Desserts\n`;
1133
+ cookbook.toc.slice(-1).forEach(chapter => {
1134
+ chapter.recipes.slice(0, 3).forEach(recipe => {
1135
+ indexContent += `- ${recipe}\n`;
1136
+ });
1137
+ });
1138
+
1139
+ return indexContent;
1140
+ }
1141
+
1142
+ function generateConversionChart() {
1143
+ return `# Measurement Conversions
1144
+
1145
+ ## Volume Conversions
1146
+ | Metric | US Standard |
1147
+ |--------|-------------|
1148
+ | 1 ml | 1/4 tsp |
1149
+ | 5 ml | 1 tsp |
1150
+ | 15 ml | 1 tbsp |
1151
+ | 30 ml | 1 fl oz |
1152
+ | 240 ml | 1 cup |
1153
+ | 1 liter| 4.2 cups |
1154
+
1155
+ ## Weight Conversions
1156
+ | Metric | US Standard |
1157
+ |--------|-------------|
1158
+ | 1 g | 0.035 oz |
1159
+ | 28 g | 1 oz |
1160
+ | 100 g | 3.5 oz |
1161
+ | 454 g | 1 lb |
1162
+ | 1 kg | 2.2 lb |
1163
+
1164
+ ## Oven Temperature Conversions
1165
+ | °C | °F | Gas Mark |
1166
+ |-----|-------|----------|
1167
+ | 110 | 225 | 1/4 |
1168
+ | 120 | 250 | 1/2 |
1169
+ | 140 | 275 | 1 |
1170
+ | 150 | 300 | 2 |
1171
+ | 170 | 325 | 3 |
1172
+ | 180 | 350 | 4 |
1173
+ | 190 | 375 | 5 |
1174
+ | 200 | 400 | 6 |
1175
+ | 220 | 425 | 7 |
1176
+ | 230 | 450 | 8 |
1177
+ | 240 | 475 | 9 |`;
1178
+ }
1179
+
1180
+ function displayMatterContent() {
1181
+ const matterPreview = document.getElementById('matter-preview');
1182
+ matterPreview.innerHTML = '';
1183
+
1184
+ // Front matter
1185
+ if (document.getElementById('generate-intro').checked && cookbook.frontMatter.introduction) {
1186
+ const introDiv = document.createElement('div');
1187
+ introDiv.className = 'border border-gray-200 rounded-lg p-4 bg-gray-50';
1188
+
1189
+ const introHeader = document.createElement('div');
1190
+ introHeader.className = 'flex justify-between items-center mb-3';
1191
+
1192
+ const introTitle = document.createElement('h4');
1193
+ introTitle.className = 'text-lg font-bold text-gray-800';
1194
+ introTitle.textContent = 'Introduction';
1195
+
1196
+ introHeader.appendChild(introTitle);
1197
+ introDiv.appendChild(introHeader);
1198
+
1199
+ const introContent = document.createElement('div');
1200
+ introContent.className = 'prose max-w-none markdown-content';
1201
+ introContent.innerHTML = marked.parse(cookbook.frontMatter.introduction);
1202
+
1203
+ introDiv.appendChild(introContent);
1204
+ matterPreview.appendChild(introDiv);
1205
+ }
1206
+
1207
+ if (document.getElementById('generate-pantry').checked && cookbook.frontMatter.pantry) {
1208
+ const pantryDiv = document.createElement('div');
1209
+ pantryDiv.className = 'border border-gray-200 rounded-lg p-4 bg-gray-50';
1210
+
1211
+ const pantryHeader = document.createElement('div');
1212
+ pantryHeader.className = 'flex justify-between items-center mb-3';
1213
+
1214
+ const pantryTitle = document.createElement('h4');
1215
+ pantryTitle.className = 'text-lg font-bold text-gray-800';
1216
+ pantryTitle.textContent = 'Pantry Essentials';
1217
+
1218
+ pantryHeader.appendChild(pantryTitle);
1219
+ pantryDiv.appendChild(pantryHeader);
1220
+
1221
+ const pantryContent = document.createElement('div');
1222
+ pantryContent.className = 'prose max-w-none markdown-content';
1223
+ pantryContent.innerHTML = marked.parse(cookbook.frontMatter.pantry);
1224
+
1225
+ pantryDiv.appendChild(pantryContent);
1226
+ matterPreview.appendChild(pantryDiv);
1227
+ }
1228
+
1229
+ if (document.getElementById('generate-tips').checked && cookbook.frontMatter.tips) {
1230
+ const tipsDiv = document.createElement('div');
1231
+ tipsDiv.className = 'border border-gray-200 rounded-lg p-4 bg-gray-50';
1232
+
1233
+ const tipsHeader = document.createElement('div');
1234
+ tipsHeader.className = 'flex justify-between items-center mb-3';
1235
+
1236
+ const tipsTitle = document.createElement('h4');
1237
+ tipsTitle.className = 'text-lg font-bold text-gray-800';
1238
+ tipsTitle.textContent = 'Cooking Tips';
1239
+
1240
+ tipsHeader.appendChild(tipsTitle);
1241
+ tipsDiv.appendChild(tipsHeader);
1242
+
1243
+ const tipsContent = document.createElement('div');
1244
+ tipsContent.className = 'prose max-w-none markdown-content';
1245
+ tipsContent.innerHTML = marked.parse(cookbook.frontMatter.tips);
1246
+
1247
+ tipsDiv.appendChild(tipsContent);
1248
+ matterPreview.appendChild(tipsDiv);
1249
+ }
1250
+
1251
+ // Back matter
1252
+ if (document.getElementById('generate-conclusion').checked && cookbook.backMatter.conclusion) {
1253
+ const conclusionDiv = document.createElement('div');
1254
+ conclusionDiv.className = 'border border-gray-200 rounded-lg p-4 bg-gray-50';
1255
+
1256
+ const conclusionHeader = document.createElement('div');
1257
+ conclusionHeader.className = 'flex justify-between items-center mb-3';
1258
+
1259
+ const conclusionTitle = document.createElement('h4');
1260
+ conclusionTitle.className = 'text-lg font-bold text-gray-800';
1261
+ conclusionTitle.textContent = 'Conclusion';
1262
+
1263
+ conclusionHeader.appendChild(conclusionTitle);
1264
+ conclusionDiv.appendChild(conclusionHeader);
1265
+
1266
+ const conclusionContent = document.createElement('div');
1267
+ conclusionContent.className = 'prose max-w-none markdown-content';
1268
+ conclusionContent.innerHTML = marked.parse(cookbook.backMatter.conclusion);
1269
+
1270
+ conclusionDiv.appendChild(conclusionContent);
1271
+ matterPreview.appendChild(conclusionDiv);
1272
+ }
1273
+
1274
+ if (document.getElementById('generate-index').checked && cookbook.backMatter.index) {
1275
+ const indexDiv = document.createElement('div');
1276
+ indexDiv.className = 'border border-gray-200 rounded-lg p-4 bg-gray-50';
1277
+
1278
+ const indexHeader = document.createElement('div');
1279
+ indexHeader.className = 'flex justify-between items-center mb-3';
1280
+
1281
+ const indexTitle = document.createElement('h4');
1282
+ indexTitle.className = 'text-lg font-bold text-gray-800';
1283
+ indexTitle.textContent = 'Recipe Index';
1284
+
1285
+ indexHeader.appendChild(indexTitle);
1286
+ indexDiv.appendChild(indexHeader);
1287
+
1288
+ const indexContent = document.createElement('div');
1289
+ indexContent.className = 'prose max-w-none markdown-content';
1290
+ indexContent.innerHTML = marked.parse(cookbook.backMatter.index);
1291
+
1292
+ indexDiv.appendChild(indexContent);
1293
+ matterPreview.appendChild(indexDiv);
1294
+ }
1295
+
1296
+ if (document.getElementById('generate-conversion').checked && cookbook.backMatter.conversions) {
1297
+ const conversionDiv = document.createElement('div');
1298
+ conversionDiv.className = 'border border-gray-200 rounded-lg p-4 bg-gray-50';
1299
+
1300
+ const conversionHeader = document.createElement('div');
1301
+ conversionHeader.className = 'flex justify-between items-center mb-3';
1302
+
1303
+ const conversionTitle = document.createElement('h4');
1304
+ conversionTitle.className = 'text-lg font-bold text-gray-800';
1305
+ conversionTitle.textContent = 'Measurement Conversions';
1306
+
1307
+ conversionHeader.appendChild(conversionTitle);
1308
+ conversionDiv.appendChild(conversionHeader);
1309
+
1310
+ const conversionContent = document.createElement('div');
1311
+ conversionContent.className = 'prose max-w-none markdown-content';
1312
+ conversionContent.innerHTML = marked.parse(cookbook.backMatter.conversions);
1313
+
1314
+ conversionDiv.appendChild(conversionContent);
1315
+ matterPreview.appendChild(conversionDiv);
1316
+ }
1317
+ }
1318
+
1319
+ // Step 6: Export
1320
+ document.getElementById('back-to-step5').addEventListener('click', () => showStep(5));
1321
+
1322
+ document.querySelectorAll('.export-option').forEach(option => {
1323
+ option.addEventListener('click', function() {
1324
+ // Remove active class from all options
1325
+ document.querySelectorAll('.export-option').forEach(opt => {
1326
+ opt.classList.remove('border-blue-500', 'bg-blue-100');
1327
+ });
1328
+
1329
+ // Add active class to selected option
1330
+ this.classList.add('border-blue-500', 'bg-blue-100');
1331
+
1332
+ // Store selected format
1333
+ document.getElementById('export-book').dataset.format = this.dataset.format;
1334
+ });
1335
+ });
1336
+
1337
+ document.getElementById('export-book').addEventListener('click', function() {
1338
+ const format = this.dataset.format;
1339
+
1340
+ if (!format) {
1341
+ alert('Please select an export format');
1342
+ return;
1343
+ }
1344
+
1345
+ // Show loading state
1346
+ document.getElementById('export-book-text').classList.add('hidden');
1347
+ document.getElementById('export-book-spinner').classList.remove('hidden');
1348
+
1349
+ // Simulate export process
1350
+ setTimeout(() => {
1351
+ // Hide loading state
1352
+ document.getElementById('export-book-text').classList.remove('hidden');
1353
+ document.getElementById('export-book-spinner').classList.add('hidden');
1354
+
1355
+ // Show preview modal
1356
+ showPreviewModal();
1357
+ }, 1500);
1358
+ });
1359
+
1360
+ function showPreviewModal() {
1361
+ const modal = document.getElementById('preview-modal');
1362
+ const previewContent = document.getElementById('full-preview-content');
1363
+
1364
+ // Generate full preview content
1365
+ let fullContent = '';
1366
+
1367
+ // Add title page
1368
+ fullContent += `# ${cookbook.title}\n\n`;
1369
+ fullContent += `## A Cookbook by You\n\n`;
1370
+ fullContent += `---\n\n`;
1371
+
1372
+ // Add front matter
1373
+ if (cookbook.frontMatter.introduction) {
1374
+ fullContent += cookbook.frontMatter.introduction + '\n\n';
1375
+ }
1376
+ if (cookbook.frontMatter.pantry) {
1377
+ fullContent += cookbook.frontMatter.pantry + '\n\n';
1378
+ }
1379
+ if (cookbook.frontMatter.tips) {
1380
+ fullContent += cookbook.frontMatter.tips + '\n\n';
1381
+ }
1382
+
1383
+ // Add TOC
1384
+ fullContent += `# Table of Contents\n\n`;
1385
+ cookbook.toc.forEach((chapter, index) => {
1386
+ fullContent += `## Chapter ${index + 1}: ${chapter.title}\n`;
1387
+ chapter.recipes.forEach(recipe => {
1388
+ fullContent += `- ${recipe}\n`;
1389
+ });
1390
+ fullContent += `\n`;
1391
+ });
1392
+ fullContent += `---\n\n`;
1393
+
1394
+ // Add recipes
1395
+ cookbook.toc.forEach(chapter => {
1396
+ fullContent += `# ${chapter.title}\n\n`;
1397
+
1398
+ if (cookbook.recipes[chapter.title]) {
1399
+ cookbook.recipes[chapter.title].forEach(recipe => {
1400
+ if (recipe) {
1401
+ fullContent += recipe + '\n\n---\n\n';
1402
+ }
1403
+ });
1404
+ }
1405
+ });
1406
+
1407
+ // Add back matter
1408
+ if (cookbook.backMatter.conclusion) {
1409
+ fullContent += cookbook.backMatter.conclusion + '\n\n';
1410
+ }
1411
+ if (cookbook.backMatter.index) {
1412
+ fullContent += cookbook.backMatter.index + '\n\n';
1413
+ }
1414
+ if (cookbook.backMatter.conversions) {
1415
+ fullContent += cookbook.backMatter.conversions + '\n\n';
1416
+ }
1417
+
1418
+ // Render markdown
1419
+ previewContent.innerHTML = marked.parse(fullContent);
1420
+
1421
+ // Show modal
1422
+ modal.classList.remove('hidden');
1423
+ }
1424
+
1425
+ document.getElementById('close-preview').addEventListener('click', () => {
1426
+ document.getElementById('preview-modal').classList.add('hidden');
1427
+ });
1428
+
1429
+ document.getElementById('export-from-preview').addEventListener('click', () => {
1430
+ alert('Export functionality would be implemented here. In a real app, this would generate a Word or PDF file.');
1431
+ document.getElementById('preview-modal').classList.add('hidden');
1432
+ });
1433
+
1434
+ // Marked.js for markdown rendering
1435
+ const marked = {
1436
+ parse: function(markdown) {
1437
+ // Simple markdown to HTML conversion (in a real app, use the actual marked.js library)
1438
+ let html = markdown;
1439
+
1440
+ // Headers
1441
+ html = html.replace(/^# (.*$)/gm, '<h1>$1</h1>');
1442
+ html = html.replace(/^## (.*$)/gm, '<h2>$1</h2>');
1443
+ html = html.replace(/^### (.*$)/gm, '<h3>$1</h3>');
1444
+
1445
+ // Lists
1446
+ html = html.replace(/^\* (.*$)/gm, '<li>$1</li>');
1447
+ html = html.replace(/^- (.*$)/gm, '<li>$1</li>');
1448
+ html = html.replace(/^(\d+)\. (.*$)/gm, '<li>$2</li>');
1449
+
1450
+ // Paragraphs
1451
+ html = html.replace(/^(?!<[a-z])(.*$)/gm, function(m) {
1452
+ return m.trim() ? '<p>' + m + '</p>' : '';
1453
+ });
1454
+
1455
+ // Simple line breaks
1456
+ html = html.replace(/\n/g, '<br>');
1457
+
1458
+ return html;
1459
+ }
1460
+ };
1461
+
1462
+ // Initialize app
1463
+ showStep(1);
1464
+ </script>
1465
+ <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=nyaringe/practical-models" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1466
+ </html>
prompts.txt ADDED
File without changes