Hugging Face's logo

Spaces:
mfoud444
/
research
Paused

App Files Community
mfoud444 commited on
Commit
89977b6
·
verified ·
1 Parent(s): 443758a

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +191 -202
templates/index.html CHANGED
@@ -1,224 +1,213 @@
 
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>Research Paper 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
- <script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  </head>
11
- <body class="bg-gray-50 min-h-screen">
12
  <div class="container mx-auto px-4 py-8">
13
- <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
14
- <div class="text-center mb-8">
15
- <h1 class="text-3xl font-bold text-indigo-700 mb-2">
16
- <i class="fas fa-file-alt mr-2"></i>Research Paper Generator
17
- </h1>
18
- <p class="text-gray-600">Generate complete research papers with AI</p>
19
- </div>
20
-
21
- <form id="paperForm" class="space-y-6">
22
- <div>
23
- <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">
24
- <i class="fas fa-book mr-2"></i>Research Subject
25
- </label>
26
- <input type="text" id="subject" name="subject" required
27
- class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
28
- placeholder="Enter your research topic">
29
- </div>
30
 
31
- <div>
32
- <label for="model" class="block text-sm font-medium text-gray-700 mb-1">
33
- <i class="fas fa-brain mr-2"></i>AI Model
34
- </label>
35
- <select id="model" name="model"
36
- class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
37
- {% for model in models %}
38
- <option value="{{ model }}" {% if model == 'gpt-4o' %}selected{% endif %}>{{ model }}</option>
39
- {% endfor %}
40
- </select>
 
 
 
41
  </div>
 
 
 
 
 
42
 
43
- <div>
44
- <label class="block text-sm font-medium text-gray-700 mb-2">
45
- <i class="fas fa-layer-group mr-2"></i>Paper Structure
46
- </label>
47
- <div class="flex space-x-4">
48
- <label class="inline-flex items-center">
49
- <input type="radio" name="structure" value="automatic" checked
50
- class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
51
- <span class="ml-2 text-gray-700">Automatic</span>
52
- </label>
53
- <label class="inline-flex items-center">
54
- <input type="radio" name="structure" value="manual"
55
- class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
56
- <span class="ml-2 text-gray-700">Manual</span>
57
- </label>
58
- </div>
59
- </div>
60
 
61
- <!-- New automatic structure options -->
62
- <div id="automaticOptions" class="space-y-4">
63
- <div>
64
- <label for="chapterCount" class="block text-sm font-medium text-gray-700 mb-1">
65
- <i class="fas fa-list-ol mr-2"></i>Number of Chapters
66
- </label>
67
- <div class="flex space-x-4 mb-2">
68
- <label class="inline-flex items-center">
69
- <input type="radio" name="chapterCountType" value="auto" checked
70
- class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
71
- <span class="ml-2 text-gray-700">Automatic</span>
72
- </label>
73
- <label class="inline-flex items-center">
74
- <input type="radio" name="chapterCountType" value="manual"
75
- class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
76
- <span class="ml-2 text-gray-700">Manual</span>
77
- </label>
78
- </div>
79
- <div class="flex space-x-4">
80
- <select id="chapterCount" name="chapterCount" disabled
81
- class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
82
- <option value="3">3 Chapters</option>
83
- <option value="4">4 Chapters</option>
84
- <option value="5">5 Chapters</option>
85
- <option value="6">6 Chapters</option>
86
- </select>
87
- <input type="number" id="customChapterCount" name="customChapterCount"
88
- class="hidden w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
89
- min="1" max="10" placeholder="Enter number (1-10)">
90
- </div>
91
- </div>
92
-
93
- <div>
94
- <label for="wordCount" class="block text-sm font-medium text-gray-700 mb-1">
95
- <i class="fas fa-font mr-2"></i>Target Word Count
96
- </label>
97
- <div class="flex space-x-4 mb-2">
98
- <label class="inline-flex items-center">
99
- <input type="radio" name="wordCountType" value="auto" checked
100
- class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
101
- <span class="ml-2 text-gray-700">Automatic</span>
102
- </label>
103
- <label class="inline-flex items-center">
104
- <input type="radio" name="wordCountType" value="manual"
105
- class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
106
- <span class="ml-2 text-gray-700">Manual</span>
107
- </label>
108
- </div>
109
- <div class="flex space-x-4">
110
- <select id="wordCount" name="wordCount" disabled
111
- class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
112
- <option value="2000">2,000 words</option>
113
- <option value="3000">3,000 words</option>
114
- <option value="5000">5,000 words</option>
115
- <option value="8000">8,000 words</option>
116
- <option value="10000">10,000 words</option>
117
- </select>
118
- <input type="number" id="customWordCount" name="customWordCount"
119
- class="hidden w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
120
- min="500" max="20000" step="100" placeholder="Enter words (500-20000)">
121
- </div>
122
- </div>
123
-
124
- <div>
125
- <label class="block text-sm font-medium text-gray-700 mb-2">
126
- <i class="fas fa-quote-right mr-2"></i>References
127
- </label>
128
- <div class="flex items-center mb-2">
129
- <input type="checkbox" id="includeReferences" name="includeReferences"
130
- class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
131
- <label for="includeReferences" class="ml-2 text-sm text-gray-700">Include References Section</label>
132
- </div>
133
- <select id="citationStyle" name="citationStyle" disabled
134
- class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
135
- <option value="APA">APA</option>
136
- <option value="MLA">MLA</option>
137
- <option value="Chicago">Chicago</option>
138
- <option value="Harvard">Harvard</option>
139
- </select>
140
- </div>
141
- </div>
142
 
143
- <div class="pt-4">
144
- <button type="submit" id="startBtn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
145
- <i class="fas fa-play mr-2"></i> Generate Paper
146
- </button>
147
- <button type="button" id="abortBtn" style="display: none;" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700">
148
- <i class="fas fa-stop mr-2"></i> Stop Generation
149
- </button>
150
- </div>
151
- </form>
152
 
153
- <div id="progressContainer" class="mt-8 hidden">
154
- <h3 class="text-lg font-medium text-gray-900 mb-4">
155
- <i class="fas fa-tasks mr-2"></i>Generation Progress
156
- </h3>
157
-
158
- <!-- Chapter-specific progress -->
159
- <div id="chapterProgressContainer" class="bg-blue-50 p-4 rounded-lg mb-4 hidden">
160
- <div class="flex justify-between items-center mb-2">
161
- <span class="font-medium text-blue-800" id="currentChapter">Chapter 1/5: Introduction</span>
162
- <span class="text-sm font-semibold text-blue-600" id="chapterPercent">0%</span>
163
- </div>
164
- <div class="w-full bg-blue-200 rounded-full h-2.5">
165
- <div id="chapterProgressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
166
- </div>
167
- <div class="flex justify-between mt-1 text-xs text-blue-600">
168
- <span id="chapterTime">Time elapsed: 0s</span>
169
- <span id="chapterStatus">Starting...</span>
170
- </div>
171
- <div id="chapterError" class="text-red-500 text-xs mt-1 hidden"></div>
172
- </div>
173
 
174
- <!-- Overall progress -->
175
- <div class="space-y-4">
176
- <div id="progressSteps" class="space-y-3"></div>
177
- <div class="relative pt-1">
178
- <div class="flex items-center justify-between">
179
- <div>
180
- <span id="progressText" class="text-xs font-semibold inline-block text-indigo-600">
181
- 0%
182
- </span>
183
- </div>
184
- </div>
185
- <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200">
186
- <div id="progressBar" style="width:0%"
187
- class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500 transition-all duration-300"></div>
188
- </div>
189
- </div>
190
- </div>
191
- </div>
192
 
193
- <div id="resultContainer" class="mt-8 hidden">
194
- <h3 class="text-lg font-medium text-gray-900 mb-4">
195
- <i class="fas fa-check-circle mr-2 text-green-500"></i>Generation Complete
196
- </h3>
197
- <div class="flex space-x-4">
198
- <a id="downloadDocx" href="#"
199
- class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700">
200
- <i class="fas fa-file-word mr-2"></i> Download Word
201
- </a>
202
- <a id="downloadMd" href="#"
203
- class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
204
- <i class="fas fa-file-code mr-2"></i> Download Markdown
205
- </a>
206
- </div>
207
- </div>
208
 
209
- <div id="errorContainer" class="mt-8 hidden">
210
- <div class="bg-red-50 border-l-4 border-red-400 p-4">
211
- <div class="flex">
212
- <div class="flex-shrink-0">
213
- <i class="fas fa-exclamation-circle text-red-400"></i>
214
- </div>
215
- <div class="ml-3">
216
- <p id="errorMessage" class="text-sm text-red-700"></p>
217
- </div>
218
- </div>
219
  </div>
 
220
  </div>
221
  </div>
 
 
222
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
  </body>
224
- </html>
 
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Markdown to DOCX Converter</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/lib/core.min.js"></script>
11
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/styles/github.min.css">
12
+ <style>
13
+ .editor-container {
14
+ height: calc(100vh - 200px);
15
+ }
16
+ #markdown-input, #markdown-preview {
17
+ height: 100%;
18
+ overflow-y: auto;
19
+ }
20
+ #markdown-preview {
21
+ border-left: 1px solid #e2e8f0;
22
+ }
23
+ .hljs {
24
+ background: #f8fafc;
25
+ border-radius: 0.25rem;
26
+ padding: 1rem;
27
+ }
28
+ .hljs pre {
29
+ margin: 0;
30
+ }
31
+ </style>
32
  </head>
33
+ <body class="bg-gray-50">
34
  <div class="container mx-auto px-4 py-8">
35
+ <header class="mb-8 text-center">
36
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">Markdown to DOCX Converter</h1>
37
+ <p class="text-gray-600">Write your Markdown and convert it to a professional DOCX document</p>
38
+ </header>
 
 
 
 
 
 
 
 
 
 
 
 
 
39
 
40
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
41
+ <div class="flex justify-between items-center bg-gray-100 px-4 py-3 border-b border-gray-200">
42
+ <h2 class="font-semibold text-gray-700">Editor</h2>
43
+ <div class="flex space-x-2">
44
+ <button id="preview-toggle" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-md text-sm hover:bg-gray-300 md:hidden">
45
+ Toggle Preview
46
+ </button>
47
+ <button id="convert-btn" class="px-3 py-1 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 flex items-center">
48
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
49
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
50
+ </svg>
51
+ Convert to DOCX
52
+ </button>
53
  </div>
54
+ </div>
55
+
56
+ <div class="flex flex-col md:flex-row editor-container">
57
+ <div class="w-full md:w-1/2 p-4">
58
+ <textarea id="markdown-input" class="w-full h-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none" placeholder="Write your Markdown here..."># Welcome to Markdown to DOCX Converter
59
 
60
+ ## Features
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
 
62
+ - **Easy to use**: Just write Markdown and click convert
63
+ - **Supports all Markdown features**:
64
+ - Headers
65
+ - Lists
66
+ - Code blocks
67
+ - Tables
68
+ - And more!
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
 
70
+ ```python
71
+ def hello_world():
72
+ print("Hello, World!")
73
+ ```
 
 
 
 
 
74
 
75
+ ## How to use
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
 
77
+ 1. Write your content in Markdown
78
+ 2. Click the "Convert to DOCX" button
79
+ 3. Download your professional DOCX document
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80
 
81
+ | Feature | Support |
82
+ |--------------|---------|
83
+ | Headers | ✅ |
84
+ | Lists | ✅ |
85
+ | Code Blocks | ✅ |
86
+ | Tables | ✅ |
 
 
 
 
 
 
 
 
 
87
 
88
+ > This is a blockquote. Your converted document will preserve all formatting.</textarea>
 
 
 
 
 
 
 
 
 
89
  </div>
90
+ <div id="markdown-preview" class="w-full md:w-1/2 p-4 prose max-w-none"></div>
91
  </div>
92
  </div>
93
+
94
+ <div id="status-message" class="hidden fixed bottom-4 right-4 bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded"></div>
95
  </div>
96
+
97
+ <script>
98
+ // Initialize Marked with Highlight.js for code highlighting
99
+ marked.setOptions({
100
+ highlight: function(code, lang) {
101
+ const language = hljs.getLanguage(lang) ? lang : 'plaintext';
102
+ return hljs.highlight(code, { language }).value;
103
+ },
104
+ langPrefix: 'hljs language-',
105
+ breaks: true,
106
+ gfm: true
107
+ });
108
+
109
+ // Elements
110
+ const markdownInput = document.getElementById('markdown-input');
111
+ const markdownPreview = document.getElementById('markdown-preview');
112
+ const convertBtn = document.getElementById('convert-btn');
113
+ const previewToggle = document.getElementById('preview-toggle');
114
+ const statusMessage = document.getElementById('status-message');
115
+
116
+ // Update preview on input
117
+ function updatePreview() {
118
+ markdownPreview.innerHTML = marked.parse(markdownInput.value);
119
+ }
120
+
121
+ // Initial preview update
122
+ updatePreview();
123
+
124
+ // Event listeners
125
+ markdownInput.addEventListener('input', updatePreview);
126
+
127
+ previewToggle.addEventListener('click', () => {
128
+ markdownPreview.classList.toggle('hidden');
129
+ markdownInput.classList.toggle('w-full');
130
+ });
131
+
132
+ convertBtn.addEventListener('click', async () => {
133
+ const markdown = markdownInput.value.trim();
134
+
135
+ if (!markdown) {
136
+ showStatus('Please enter some Markdown content', 'error');
137
+ return;
138
+ }
139
+
140
+ try {
141
+ convertBtn.disabled = true;
142
+ convertBtn.innerHTML = `
143
+ <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
144
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
145
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
146
+ </svg>
147
+ Converting...
148
+ `;
149
+
150
+ showStatus('Converting to DOCX...', 'info');
151
+
152
+ // Replace this URL with your actual Pandoc server API endpoint
153
+ const response = await fetch('https://your-pandoc-server-api.com/convert', {
154
+ method: 'POST',
155
+ headers: {
156
+ 'Content-Type': 'application/json',
157
+ },
158
+ body: JSON.stringify({
159
+ markdown: markdown
160
+ })
161
+ });
162
+
163
+ if (!response.ok) {
164
+ throw new Error(`Server returned ${response.status}`);
165
+ }
166
+
167
+ const blob = await response.blob();
168
+ const url = window.URL.createObjectURL(blob);
169
+ const a = document.createElement('a');
170
+ a.href = url;
171
+ a.download = 'document.docx';
172
+ document.body.appendChild(a);
173
+ a.click();
174
+ document.body.removeChild(a);
175
+ window.URL.revokeObjectURL(url);
176
+
177
+ showStatus('Document downloaded successfully!', 'success');
178
+ } catch (error) {
179
+ console.error('Conversion error:', error);
180
+ showStatus('Error converting document. Please try again.', 'error');
181
+ } finally {
182
+ convertBtn.disabled = false;
183
+ convertBtn.innerHTML = `
184
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
185
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
186
+ </svg>
187
+ Convert to DOCX
188
+ `;
189
+ }
190
+ });
191
+
192
+ function showStatus(message, type) {
193
+ statusMessage.textContent = message;
194
+ statusMessage.className = `fixed bottom-4 right-4 px-4 py-3 rounded`;
195
+
196
+ if (type === 'error') {
197
+ statusMessage.classList.add('bg-red-100', 'border-red-400', 'text-red-700');
198
+ } else if (type === 'success') {
199
+ statusMessage.classList.add('bg-green-100', 'border-green-400', 'text-green-700');
200
+ } else {
201
+ statusMessage.classList.add('bg-blue-100', 'border-blue-400', 'text-blue-700');
202
+ }
203
+
204
+ statusMessage.classList.remove('hidden');
205
+
206
+ setTimeout(() => {
207
+ statusMessage.classList.add('hidden');
208
+ }, 5000);
209
+ }
210
+ </script>
211
  </body>
212
+ </html>
213
+