├── package.json
├── wsgi.py
├── requirements.txt
├── vercel.json
├── app.py
└── templates
    └── index.html


/package.json:
--------------------------------------------------------------------------------
1 | {
2 |     "engines": {
3 |       "node": "18.x"
4 |     }
5 | }
6 | 


--------------------------------------------------------------------------------
/wsgi.py:
--------------------------------------------------------------------------------
1 | from app import app
2 | 
3 | if __name__ == "__main__":
4 |     app.run()
5 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | Flask==3.0.0
2 | google-generativeai==0.4.1
3 | python-docx==1.0.0
4 | PyPDF2==3.0.1
5 | werkzeug==3.0.1
6 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": 2,
 3 |     "builds": [
 4 |         {
 5 |             "src": "wsgi.py",
 6 |             "use": "@vercel/python"
 7 |         }
 8 |     ],
 9 |     "routes": [
10 |         {
11 |             "src": "/(.*)",
12 |             "dest": "wsgi.py"
13 |         }
14 |     ]
15 | }
16 | 


--------------------------------------------------------------------------------
/app.py:
--------------------------------------------------------------------------------
  1 | from flask import Flask, render_template, request, jsonify
  2 | import logging
  3 | import google.generativeai as genai
  4 | from google.generativeai.types import GenerationConfig
  5 | import re
  6 | import json
  7 | import os
  8 | from werkzeug.utils import secure_filename
  9 | from docx import Document
 10 | import PyPDF2
 11 | import tempfile
 12 | 
 13 | # Replace with your actual API key
 14 | api_key = os.environ.get("API_KEY")   # Replace this with your API key
 15 | 
 16 | app = Flask(__name__)
 17 | 
 18 | # Configure the Google Generative AI API
 19 | genai.configure(api_key=api_key)
 20 | 
 21 | # Generation configurations
 22 | generation_config = GenerationConfig(
 23 |     temperature=0.9,
 24 |     top_p=1,
 25 |     top_k=1,
 26 |     max_output_tokens=2048,
 27 |     candidate_count=1
 28 | )
 29 | 
 30 | # Initialize the model for flowchart generation
 31 | model = genai.GenerativeModel('gemini-1.5-flash')
 32 | 
 33 | # Configure upload folder and allowed extensions
 34 | app.config['UPLOAD_FOLDER'] = 'uploads'
 35 | app.config['ALLOWED_EXTENSIONS'] = {'pdf', 'docx'}
 36 | 
 37 | # In-memory storage for the current flowchart data (replace with a database for persistence)
 38 | current_flowchart_data = {"nodes": [], "edges": []}
 39 | is_chart_modifying = False  # flag to prevent concurrent modifications
 40 | 
 41 | def allowed_file(filename):
 42 |     return '.' in filename and \
 43 |            filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
 44 | 
 45 | def extract_text_from_docx(file_path):
 46 |     doc = Document(file_path)
 47 |     full_text = []
 48 |     for para in doc.paragraphs:
 49 |         if para.text.strip():  # Only include non-empty paragraphs
 50 |             full_text.append(para.text)
 51 |     return '\n'.join(full_text)
 52 | 
 53 | def extract_text_from_pdf(file_path):
 54 |     with open(file_path, 'rb') as f:
 55 |         pdfReader = PyPDF2.PdfReader(f)
 56 |         full_text = []
 57 |         for page in pdfReader.pages:
 58 |             text = page.extract_text()
 59 |             if text.strip():  # Only include non-empty pages
 60 |                 full_text.append(text)
 61 |     return '\n'.join(full_text)
 62 | 
 63 | def clean_and_validate_json(text):
 64 |     """Clean and validate JSON from the model's response."""
 65 |     json_match = re.search(r'\{[\s\S]*\}', text)
 66 |     if not json_match:
 67 |         return None
 68 | 
 69 |     json_str = json_match.group()
 70 | 
 71 |     json_str = re.sub(r'```json\s*', '', json_str)
 72 |     json_str = re.sub(r'```\s*$', '', json_str)
 73 |     json_str = json_str.strip()
 74 | 
 75 |     try:
 76 |         json_data = json.loads(json_str)
 77 | 
 78 |         if not all(key in json_data for key in ['nodes', 'edges']):
 79 |             return None
 80 | 
 81 |         for node in json_data['nodes']:
 82 |             if not all(key in node for key in ['id', 'label']):
 83 |                 return None
 84 |             node['shape'] = node.get('shape', 'box')
 85 |             node['level'] = node.get('level', 0)
 86 |             node['order'] = node.get('order', 1)
 87 | 
 88 |         for edge in json_data['edges']:
 89 |             if not all(key in edge for key in ['from', 'to']):
 90 |                 return None
 91 |             edge['order'] = edge.get('order', 1)
 92 | 
 93 |         return json_data
 94 |     except json.JSONDecodeError:
 95 |         return None
 96 | 
 97 | def generate_flowchart(topic, chart_type, animation, detail_level, document_text=None):
 98 |     max_text_length = 4000
 99 |     if document_text:
100 |         topic_prompt = f"Generate a hierarchical {'mind map' if chart_type == 'mind_map' else 'flowchart'} based on this content:\n\n{document_text}\n\n"
101 |     else:
102 |         topic_prompt = f"Generate a hierarchical {'mind map' if chart_type == 'mind_map' else 'flowchart'} for: \"{topic}\".\n\n"
103 | 
104 |     prompt = topic_prompt + f"""
105 | Please create a {'mind map' if chart_type == 'mind_map' else 'flowchart'} that is {'animated' if animation == 'animated' else 'static'} and {'simple' if detail_level == 'simple' else 'normal' if detail_level == 'normal' else 'detailed'}.
106 | 
107 | Output a JSON object with this exact structure:
108 | {{
109 |     "nodes": [
110 |         {{"id": 1, "label": "Start", "shape": "ellipse", "level": 0, "order": 1}},
111 |         {{"id": 2, "label": "Process", "shape": "box", "level": 1, "order": 2}}
112 |     ],
113 |     "edges": [
114 |         {{"from": 1, "to": 2, "order": 1}}
115 |     ]
116 | }}
117 | 
118 | Rules:
119 | 1. Use only these shapes: "ellipse", "box", "diamond", "hexagon", "circle"
120 | 2. Each node must have a unique integer id
121 | 3. Level 0 is root, increasing for each sub-level
122 | 4. Include order for animation sequence
123 | 5. Keep labels clear and concise
124 | 6. Maximum 20 nodes for simple, 35 for normal, 50 for detailed
125 | 7. Output ONLY the JSON, no other text"""
126 | 
127 |     try:
128 |         response = model.generate_content(prompt)
129 |         flowchart_data = clean_and_validate_json(response.text)
130 | 
131 |         if flowchart_data is None:
132 |             return {"error": "Invalid JSON structure", "raw_response": response.text}
133 | 
134 |         return flowchart_data
135 |     except Exception as e:
136 |         return {"error": f"Error generating flowchart: {str(e)}"}
137 | 
138 | def modify_flowchart(current_data, prompt, chart_type):
139 |     """Modifies the current flowchart based on a user prompt."""
140 |     current_data_str = json.dumps(current_data)
141 |     prompt_text = f"""Given the current {'mind map' if chart_type == 'mind_map' else 'flowchart'} data:\n\n{current_data_str}\n\nModify it according to the following prompt: \"{prompt}\".
142 | 
143 | The output should be a JSON object with the same structure as before, representing the updated {'mind map' if chart_type == 'mind_map' else 'flowchart'}. Ensure that the node and edge IDs remain unique and consistent where applicable.
144 | 
145 | Output ONLY the JSON, no other text."""
146 | 
147 |     try:
148 |         response = model.generate_content(prompt_text)
149 |         modified_data = clean_and_validate_json(response.text)
150 | 
151 |         if modified_data is None:
152 |             return {"error": "Invalid JSON structure from modification", "raw_response": response.text}
153 | 
154 |         return modified_data
155 |     except Exception as e:
156 |         return {"error": f"Error modifying flowchart: {str(e)}"}
157 | 
158 | @app.route('/')
159 | def index():
160 |     return render_template('index.html')
161 | 
162 | @app.route('/get_flowchart_data', methods=['POST'])
163 | def get_flowchart_data():
164 |     global current_flowchart_data
165 |     try:
166 |         data = request.form
167 |         topic = data.get('topic', '').strip()
168 |         chart_type = data.get('type', 'flowchart')
169 |         animation = data.get('animation', 'static')
170 |         detail_level = data.get('detail_level', 'normal')
171 | 
172 |         document_text = None
173 |         file = request.files.get('file')
174 | 
175 |         if file and file.filename:
176 |             if not allowed_file(file.filename):
177 |                 return jsonify({"error": "Unsupported file type."}), 400
178 | 
179 |             filename = secure_filename(file.filename)
180 |             temp_fd, temp_path = tempfile.mkstemp()
181 | 
182 |             try:
183 |                 with os.fdopen(temp_fd, 'wb') as temp_file:
184 |                     file.save(temp_file)
185 | 
186 |                 if filename.lower().endswith('.docx'):
187 |                     document_text = extract_text_from_docx(temp_path)
188 |                 elif filename.lower().endswith('.pdf'):
189 |                     document_text = extract_text_from_pdf(temp_path)
190 | 
191 |                 if not topic and document_text:
192 |                     topic = "Flowchart from Document"
193 | 
194 |             finally:
195 |                 if os.path.exists(temp_path):
196 |                     os.remove(temp_path)
197 | 
198 |         if not topic and not file:
199 |             return jsonify({"error": "Please provide a topic or upload a document."}), 400
200 | 
201 |         flowchart_data = generate_flowchart(topic, chart_type, animation, detail_level, document_text)
202 | 
203 |         if 'error' in flowchart_data:
204 |             return jsonify(flowchart_data), 500
205 | 
206 |         current_flowchart_data = flowchart_data # Store the generated data
207 | 
208 |         nodes = [{
209 |             "id": node["id"],
210 |             "label": node["label"],
211 |             "shape": node.get("shape", "box"),
212 |             "order": node.get("order", 1),
213 |             "level": node.get("level", 0)
214 |         } for node in flowchart_data.get('nodes', [])]
215 | 
216 |         edges = [{
217 |             "from": edge["from"],
218 |             "to": edge["to"],
219 |             "id": f"{edge['from']}-{edge['to']}",
220 |             "order": edge.get("order", 1)
221 |         } for edge in flowchart_data.get('edges', [])]
222 | 
223 |         nodes.sort(key=lambda x: x['order'])
224 |         edges.sort(key=lambda x: x['order'])
225 | 
226 |         return jsonify({
227 |             "nodes": nodes,
228 |             "edges": edges,
229 |             "animation": animation,
230 |             "chart_type": chart_type
231 |         })
232 | 
233 |     except Exception as e:
234 |         logging.error(f"Error in get_flowchart_data: {str(e)}")
235 |         return jsonify({"error": "An unexpected error occurred."}), 500
236 | 
237 | @app.route('/add_node', methods=['POST'])
238 | def add_node():
239 |     global current_flowchart_data
240 |     data = request.get_json()
241 |     new_node = data.get('node')
242 |     if new_node:
243 |         # Simple way to generate a new unique ID (can be improved)
244 |         new_id = max([node['id'] for node in current_flowchart_data['nodes']] or [0]) + 1
245 |         new_node['id'] = new_id
246 |         current_flowchart_data['nodes'].append(new_node)
247 |         return jsonify({"status": "success", "node": new_node})
248 |     return jsonify({"status": "error", "message": "Invalid node data"}), 400
249 | 
250 | @app.route('/delete_node/<int:node_id>', methods=['DELETE'])
251 | def delete_node(node_id):
252 |     global current_flowchart_data
253 |     current_flowchart_data['nodes'] = [node for node in current_flowchart_data['nodes'] if node['id'] != node_id]
254 |     current_flowchart_data['edges'] = [edge for edge in current_flowchart_data['edges']
255 |                                        if edge['from'] != node_id and edge['to'] != node_id]
256 |     return jsonify({"status": "success"})
257 | 
258 | @app.route('/edit_node/<int:node_id>', methods=['PUT'])
259 | def edit_node(node_id):
260 |      global current_flowchart_data
261 |      data = request.get_json()
262 |      new_label = data.get('node').get('label')
263 |      for node in current_flowchart_data['nodes']:
264 |           if node['id'] == node_id:
265 |                 node['label'] = new_label
266 |                 return jsonify({"status": "success", "node": node})
267 |      return jsonify({"status": "error", "message": "Node not found"}), 404
268 | 
269 | @app.route('/add_edge', methods=['POST'])
270 | def add_edge():
271 |     global current_flowchart_data
272 |     data = request.get_json()
273 |     new_edge = data.get('edge')
274 |     if new_edge:
275 |         current_flowchart_data['edges'].append(new_edge)
276 |         return jsonify({"status": "success", "edge": new_edge})
277 |     return jsonify({"status": "error", "message": "Invalid edge data"}), 400
278 | 
279 | @app.route('/delete_edge/<from_id>/<to_id>', methods=['DELETE'])
280 | def delete_edge(from_id, to_id):
281 |     global current_flowchart_data
282 |     current_flowchart_data['edges'] = [
283 |         edge for edge in current_flowchart_data['edges']
284 |         if not (str(edge['from']) == from_id and str(edge['to']) == to_id)
285 |     ]
286 |     return jsonify({"status": "success"})
287 | 
288 | @app.route('/modify_flowchart_prompt', methods=['POST'])
289 | def modify_flowchart_prompt():
290 |     global current_flowchart_data, is_chart_modifying
291 |     data = request.get_json()
292 |     prompt = data.get('prompt')
293 |     chart_type = data.get('chart_type', 'flowchart')
294 | 
295 |     if not prompt:
296 |         return jsonify({"status": "error", "message": "Prompt cannot be empty"}), 400
297 | 
298 |     if is_chart_modifying:
299 |       return jsonify({"status": "error", "message": "Chart is currently being modified, please wait..."}), 400
300 | 
301 |     is_chart_modifying = True  # set flag
302 |     try:
303 |         modified_data = modify_flowchart(current_flowchart_data, prompt, chart_type)
304 | 
305 |         if 'error' in modified_data:
306 |             return jsonify(modified_data), 500
307 | 
308 |         current_flowchart_data = modified_data # Update the current data
309 |         
310 |         # Prepare the data for vis-network
311 |         nodes = [{
312 |             "id": node["id"],
313 |             "label": node["label"],
314 |             "shape": node.get("shape", "box"),
315 |             "order": node.get("order", 1),
316 |             "level": node.get("level", 0)
317 |         } for node in modified_data.get('nodes', [])]
318 | 
319 |         edges = [{
320 |             "from": edge["from"],
321 |             "to": edge["to"],
322 |             "id": f"{edge['from']}-{edge['to']}",
323 |             "order": edge.get("order", 1)
324 |         } for edge in modified_data.get('edges', [])]
325 | 
326 |         return jsonify({
327 |             "status": "success",
328 |             "nodes": nodes,
329 |             "edges": edges
330 |         })
331 |     except Exception as e:
332 |        return jsonify({"error": f"Error modifying flowchart: {str(e)}"})
333 |     finally:
334 |       is_chart_modifying = False # clear flag
335 | 
336 | if __name__ == '__main__':
337 |     app.run(debug=True)
338 | 


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 |   <head>
   4 |     <meta charset="UTF-8" />
   5 |     <meta
   6 |       name="viewport"
   7 |       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
   8 |     />
   9 |     <title>ChartForge - Visualize Ideas Beautifully</title>
  10 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
  11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  12 |     <link
  13 |       href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Poppins:wght@500;700&display=swap"
  14 |       rel="stylesheet"
  15 |     />
  16 |     <script src="https://cdn.jsdelivr.net/npm/vis-network@9.1.2/dist/vis-network.min.js"></script>
  17 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  18 |     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
  19 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
  20 |     <link
  21 |       rel="stylesheet"
  22 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
  23 |       integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
  24 |       crossorigin="anonymous"
  25 |       referrerpolicy="no-referrer"
  26 |     />
  27 |     <style>
  28 |       /* ======  New CSS Styles  ====== */
  29 |       :root {
  30 |         --primary: #6c5dd3; /* Vibrant Purple */
  31 |         --primary-light: #aeaee5;
  32 |         --secondary: #ff7ea0; /* Energetic Pink */
  33 |         --background: #111827; /* Deep Charcoal */
  34 |         --surface: rgba(31, 41, 55, 0.8); /* Darker Grey with Transparency */
  35 |         --text: #f9fafb; /* Off-White */
  36 |         --text-secondary: #9ca3af; /* Light Grey */
  37 |         --error: #f44336;
  38 |         --accent: #fde047; /* Sunny Yellow */
  39 |         --shadow-color: rgba(0, 0, 0, 0.3);
  40 |         --input-border: rgba(255, 255, 255, 0.1);
  41 |         --focus-shadow: rgba(108, 93, 211, 0.6);
  42 |         --dropdown-bg: #1f2937;
  43 |         --dropdown-hover-bg: rgba(255, 255, 255, 0.08);
  44 |         --font-family-heading: "Poppins", sans-serif;
  45 |         --font-family-body: "Inter", sans-serif;
  46 |       }
  47 | 
  48 |       body,
  49 |       html {
  50 |         height: 100%;
  51 |         background-color: var(--background);
  52 |         color: var(--text);
  53 |         overflow-x: hidden;
  54 |         font-family: var(--font-family-body);
  55 |         -webkit-font-smoothing: antialiased;
  56 |         -moz-osx-font-smoothing: grayscale;
  57 |       }
  58 | 
  59 |       #vanta-background {
  60 |         position: fixed;
  61 |         top: 0;
  62 |         left: 0;
  63 |         width: 100%;
  64 |         height: 100%;
  65 |         z-index: 0;
  66 |       }
  67 | 
  68 |       .container {
  69 |         max-width: 1400px;
  70 |         margin: 0 auto;
  71 |         padding: 3rem;
  72 |         min-height: 100vh;
  73 |         display: flex;
  74 |         flex-direction: column;
  75 |         gap: 3rem;
  76 |         position: relative;
  77 |         z-index: 1;
  78 |         opacity: 0;
  79 |         transform: translateY(20px);
  80 |         animation: fadeInUp 0.8s ease-out forwards 0.2s;
  81 |       }
  82 | 
  83 |       @keyframes fadeInUp {
  84 |         to {
  85 |           opacity: 1;
  86 |           transform: translateY(0);
  87 |         }
  88 |       }
  89 | 
  90 |       .app-header {
  91 |         display: flex;
  92 |         flex-direction: column;
  93 |         align-items: center;
  94 |         text-align: center;
  95 |         margin-bottom: 2rem;
  96 |       }
  97 | 
  98 |       .app-logo {
  99 |         width: 70px;
 100 |         height: 70px;
 101 |         margin-bottom: 1rem;
 102 |         border-radius: 50%;
 103 |         background: linear-gradient(45deg, var(--primary), var(--secondary));
 104 |         display: flex;
 105 |         justify-content: center;
 106 |         align-items: center;
 107 |         color: var(--background);
 108 |         font-size: 1.8rem;
 109 |         font-family: var(--font-family-heading);
 110 |         font-weight: 700;
 111 |         letter-spacing: -1px;
 112 |         animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 113 |       }
 114 | 
 115 |       @keyframes pulse {
 116 |         0%,
 117 |         100% {
 118 |           transform: scale(1);
 119 |         }
 120 |         50% {
 121 |           transform: scale(1.05);
 122 |         }
 123 |       }
 124 | 
 125 |       .app-title {
 126 |         font-size: 3rem;
 127 |         font-family: var(--font-family-heading);
 128 |         font-weight: 700;
 129 |         letter-spacing: -1.5px;
 130 |         background: linear-gradient(45deg, var(--primary), var(--secondary));
 131 |         -webkit-background-clip: text;
 132 |         background-clip: text;
 133 |         color: transparent;
 134 |         text-shadow: 0 2px 4px var(--shadow-color);
 135 |       }
 136 | 
 137 |       .app-subtitle {
 138 |         font-size: 1.1rem;
 139 |         color: var(--text-secondary);
 140 |         margin-top: 0.5rem;
 141 |       }
 142 | 
 143 |       .form-container {
 144 |         background: var(--surface);
 145 |         border-radius: 12px;
 146 |         border: 1px solid var(--input-border);
 147 |         backdrop-filter: blur(15px);
 148 |         box-shadow: 0 8px 20px var(--shadow-color);
 149 |         padding: 3rem;
 150 |         transition: transform 0.3s ease-in-out;
 151 |       }
 152 | 
 153 |       .form-container:hover {
 154 |         transform: translateY(-5px);
 155 |       }
 156 | 
 157 |       .form-grid {
 158 |         display: grid;
 159 |         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 160 |         gap: 2rem;
 161 |       }
 162 | 
 163 |       .input-field {
 164 |         display: flex;
 165 |         flex-direction: column;
 166 |         gap: 0.7rem;
 167 |       }
 168 | 
 169 |       .input-field label {
 170 |         font-size: 1rem;
 171 |         font-weight: 600;
 172 |         color: var(--text);
 173 |         opacity: 0.85;
 174 |         transition: color 0.3s ease;
 175 |       }
 176 | 
 177 |       .input-field label:hover {
 178 |         color: var(--primary-light);
 179 |       }
 180 | 
 181 |       .input-field input,
 182 |       .input-field select {
 183 |         padding: 1rem 1.2rem;
 184 |         border-radius: 8px;
 185 |         border: 1px solid var(--input-border);
 186 |         background: rgba(255, 255, 255, 0.03);
 187 |         color: var(--text);
 188 |         font-size: 1rem;
 189 |         transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 190 |         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 191 |       }
 192 | 
 193 |       .input-field input:focus,
 194 |       .input-field select:focus {
 195 |         outline: none;
 196 |         border-color: var(--primary);
 197 |         box-shadow: 0 0 0 2px var(--focus-shadow);
 198 |       }
 199 | 
 200 |       .input-field input::placeholder {
 201 |         color: var(--text-secondary);
 202 |         opacity: 0.7;
 203 |       }
 204 | 
 205 |       .input-field select {
 206 |         appearance: none;
 207 |         -webkit-appearance: none;
 208 |         -moz-appearance: none;
 209 |         background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
 210 |         background-repeat: no-repeat;
 211 |         background-position: right 1rem center;
 212 |         background-size: 1rem;
 213 |       }
 214 | 
 215 |       .input-field select option {
 216 |         color: var(--text);
 217 |         background-color: var(--dropdown-bg);
 218 |         padding: 0.5rem 1rem;
 219 |       }
 220 | 
 221 |       .input-field select option:hover,
 222 |       .input-field select option:focus {
 223 |         background-color: var(--dropdown-hover-bg);
 224 |       }
 225 | 
 226 |       .generate-button {
 227 |         margin-top: 2.5rem;
 228 |         padding: 1.2rem 2.8rem;
 229 |         font-size: 1.1rem;
 230 |         font-weight: 600;
 231 |         color: var(--text);
 232 |         background: linear-gradient(45deg, var(--primary), var(--secondary));
 233 |         border: none;
 234 |         border-radius: 10px;
 235 |         cursor: pointer;
 236 |         transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55),
 237 |           box-shadow 0.3s ease;
 238 |         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 239 |         position: relative;
 240 |         overflow: hidden;
 241 |       }
 242 | 
 243 |       .generate-button:hover {
 244 |         transform: scale(1.03);
 245 |         box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
 246 |       }
 247 | 
 248 |       .generate-button::before {
 249 |         content: "";
 250 |         position: absolute;
 251 |         top: 0;
 252 |         left: -100%;
 253 |         width: 100%;
 254 |         height: 100%;
 255 |         background: rgba(255, 255, 255, 0.15);
 256 |         transition: all 0.4s ease;
 257 |         transform: skewX(-45deg);
 258 |       }
 259 | 
 260 |       .generate-button:hover::before {
 261 |         left: 120%;
 262 |       }
 263 | 
 264 |       .chart-container {
 265 |         width: 100%;
 266 |         height: 650px;
 267 |         background: var(--surface);
 268 |         border-radius: 12px;
 269 |         border: 1px solid var(--input-border);
 270 |         backdrop-filter: blur(15px);
 271 |         position: relative;
 272 |         display: none;
 273 |         overflow: hidden;
 274 |         box-shadow: 0 8px 20px var(--shadow-color);
 275 |         opacity: 0;
 276 |         transform: scale(0.95);
 277 |         transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
 278 |       }
 279 | 
 280 |       .chart-container.show {
 281 |         display: block;
 282 |         opacity: 1;
 283 |         transform: scale(1);
 284 |       }
 285 | 
 286 |       .chart-canvas {
 287 |         width: 100%;
 288 |         height: 100%;
 289 |       }
 290 | 
 291 |       .loader-container {
 292 |         position: absolute;
 293 |         top: 50%;
 294 |         left: 50%;
 295 |         transform: translate(-50%, -50%);
 296 |         text-align: center;
 297 |         display: none;
 298 |         flex-direction: column;
 299 |         align-items: center;
 300 |       }
 301 | 
 302 |       .loader {
 303 |         width: 50px;
 304 |         height: 50px;
 305 |         border-radius: 50%;
 306 |         border: 6px solid var(--text-secondary);
 307 |         border-top-color: var(--primary);
 308 |         animation: rotate 1s linear infinite;
 309 |         margin-bottom: 1rem;
 310 |       }
 311 | 
 312 |       @keyframes rotate {
 313 |         to {
 314 |           transform: rotate(360deg);
 315 |         }
 316 |       }
 317 | 
 318 |       .loader-text {
 319 |         font-size: 1rem;
 320 |         color: var(--text-secondary);
 321 |         font-weight: 500;
 322 |       }
 323 | 
 324 |       .control-panel {
 325 |         position: absolute;
 326 |         bottom: 1.5rem;
 327 |         left: 50%;
 328 |         transform: translateX(-50%);
 329 |         display: none;
 330 |         gap: 1rem;
 331 |         background: rgba(0, 0, 0, 0.4);
 332 |         padding: 0.8rem 1.5rem;
 333 |         border-radius: 30px;
 334 |         backdrop-filter: blur(10px);
 335 |         box-shadow: 0 5px 15px var(--shadow-color);
 336 |         z-index: 2;
 337 |       }
 338 | 
 339 |       .control-button {
 340 |         padding: 0.7rem 1.4rem;
 341 |         border: none;
 342 |         border-radius: 25px;
 343 |         background: rgba(255, 255, 255, 0.05);
 344 |         color: var(--text);
 345 |         font-weight: 500;
 346 |         cursor: pointer;
 347 |         transition: background-color 0.3s ease, transform 0.2s ease-in-out;
 348 |       }
 349 | 
 350 |       .control-button:hover {
 351 |         background-color: rgba(255, 255, 255, 0.1);
 352 |         transform: scale(1.1);
 353 |       }
 354 | 
 355 |       .control-button:active {
 356 |         transform: scale(0.95);
 357 |       }
 358 | 
 359 |       .zoom-button {
 360 |         position: absolute;
 361 |         top: 1rem;
 362 |         width: 40px;
 363 |         height: 40px;
 364 |         border: none;
 365 |         border-radius: 50%;
 366 |         background: rgba(0, 0, 0, 0.4);
 367 |         color: var(--text);
 368 |         font-size: 1.2rem;
 369 |         cursor: pointer;
 370 |         transition: background-color 0.3s ease, transform 0.2s ease-in-out;
 371 |         display: flex;
 372 |         justify-content: center;
 373 |         align-items: center;
 374 |         backdrop-filter: blur(10px);
 375 |       }
 376 | 
 377 |       .zoom-button:hover {
 378 |         background-color: rgba(0, 0, 0, 0.6);
 379 |         transform: scale(1.1);
 380 |       }
 381 | 
 382 |       .zoom-button:active {
 383 |         transform: scale(0.95);
 384 |       }
 385 | 
 386 |       #zoom-in-btn {
 387 |         left: 1rem;
 388 |       }
 389 | 
 390 |       #zoom-out-btn {
 391 |         left: 5.5rem;
 392 |       }
 393 | 
 394 |       .utility-button {
 395 |         position: absolute;
 396 |         top: 1rem;
 397 |         padding: 0.7rem 1.4rem;
 398 |         border: none;
 399 |         border-radius: 8px;
 400 |         background: rgba(0, 0, 0, 0.4);
 401 |         color: var(--text);
 402 |         font-weight: 500;
 403 |         cursor: pointer;
 404 |         transition: background-color 0.3s ease, transform 0.2s ease-in-out;
 405 |         backdrop-filter: blur(10px);
 406 |         display: flex;
 407 |         align-items: center;
 408 |         gap: 0.5rem;
 409 |       }
 410 | 
 411 |       .utility-button i {
 412 |         font-size: 1rem;
 413 |       }
 414 | 
 415 |       .utility-button:hover {
 416 |         background-color: rgba(0, 0, 0, 0.6);
 417 |         transform: scale(1.05);
 418 |       }
 419 | 
 420 |       .utility-button:active {
 421 |         transform: scale(0.95);
 422 |       }
 423 | 
 424 |       #fullscreen-btn {
 425 |         right: 1rem;
 426 |       }
 427 | 
 428 |       #save-btn {
 429 |         right: 9rem;
 430 |         background: linear-gradient(45deg, var(--accent), var(--primary));
 431 |       }
 432 | 
 433 |       .error-message {
 434 |         color: var(--error);
 435 |         text-align: center;
 436 |         padding: 1.2rem;
 437 |         border-radius: 8px;
 438 |         background: rgba(244, 67, 54, 0.1);
 439 |         border: 1px solid rgba(244, 67, 54, 0.3);
 440 |         display: none;
 441 |         animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 442 |         margin-top: 2rem;
 443 |         font-weight: 500;
 444 |       }
 445 | 
 446 |       @keyframes shake {
 447 |         10%,
 448 |         90% {
 449 |           transform: translateX(-2px);
 450 |         }
 451 |         20%,
 452 |         80% {
 453 |           transform: translateX(4px);
 454 |         }
 455 |         30%,
 456 |         50%,
 457 |         70% {
 458 |           transform: translateX(-6px);
 459 |         }
 460 |         40%,
 461 |         60% {
 462 |           transform: translateX(6px);
 463 |         }
 464 |       }
 465 | 
 466 |       ::-webkit-scrollbar {
 467 |         width: 10px;
 468 |       }
 469 | 
 470 |       ::-webkit-scrollbar-track {
 471 |         background: rgba(255, 255, 255, 0.05);
 472 |         border-radius: 5;
 473 |         padding: 5px;
 474 |       }
 475 | 
 476 |       ::-webkit-scrollbar-thumb:hover {
 477 |         background: linear-gradient(45deg, var(--secondary), var(--primary));
 478 |       }
 479 | 
 480 |       @media (max-width: 768px) {
 481 |         .container {
 482 |           padding: 1rem;
 483 |           gap: 1.5rem;
 484 |         }
 485 | 
 486 |         .app-header {
 487 |           margin-bottom: 1.5rem;
 488 |         }
 489 | 
 490 |         .app-logo {
 491 |           width: 50px;
 492 |           height: 50px;
 493 |           font-size: 1.5rem;
 494 |         }
 495 | 
 496 |         .app-title {
 497 |           font-size: 2rem;
 498 |         }
 499 | 
 500 |         .app-subtitle {
 501 |           font-size: 0.9rem;
 502 |           padding: 0 1rem;
 503 |         }
 504 | 
 505 |         .form-container {
 506 |           padding: 1.5rem;
 507 |         }
 508 | 
 509 |         .form-grid {
 510 |           grid-template-columns: 1fr;
 511 |           gap: 1rem;
 512 |         }
 513 | 
 514 |         .input-field {
 515 |           margin-bottom: 0.8rem;
 516 |         }
 517 | 
 518 |         .input-field input,
 519 |         .input-field select {
 520 |           padding: 0.8rem 1rem;
 521 |           font-size: 0.9rem;
 522 |         }
 523 | 
 524 |         .generate-button {
 525 |           width: 100%;
 526 |           margin-top: 1.5rem;
 527 |           padding: 1rem 2rem;
 528 |           font-size: 1rem;
 529 |         }
 530 | 
 531 |         .chart-container {
 532 |           height: 400px;
 533 |           margin: 1rem 0;
 534 |         }
 535 | 
 536 |         .control-panel {
 537 |           bottom: 1rem;
 538 |           flex-wrap: wrap;
 539 |           justify-content: center;
 540 |           gap: 0.5rem;
 541 |           width: 90%;
 542 |           padding: 0.5rem;
 543 |         }
 544 | 
 545 |         .control-button {
 546 |           padding: 0.5rem 0.8rem;
 547 |           font-size: 0.8rem;
 548 |         }
 549 | 
 550 |         .utility-button {
 551 |           font-size: 0.8rem;
 552 |           padding: 0.5rem 0.8rem;
 553 |         }
 554 | 
 555 |         #save-btn {
 556 |           right: 1rem;
 557 |           top: auto;
 558 |           bottom: 1rem;
 559 |         }
 560 | 
 561 |         #fullscreen-btn {
 562 |           right: 1rem;
 563 |         }
 564 | 
 565 |         .zoom-button {
 566 |           width: 32px;
 567 |           height: 32px;
 568 |           font-size: 0.9rem;
 569 |         }
 570 | 
 571 |         #zoom-in-btn {
 572 |           left: 0.5rem;
 573 |         }
 574 | 
 575 |         #zoom-out-btn {
 576 |           left: 3rem;
 577 |         }
 578 | 
 579 |         .modify-container {
 580 |           padding: 1rem;
 581 |           margin-top: 1rem;
 582 |         }
 583 | 
 584 |         .modify-container textarea {
 585 |           min-height: 80px;
 586 |           font-size: 0.9rem;
 587 |         }
 588 | 
 589 |         .modal-content {
 590 |           width: 90%;
 591 |           margin: 20% auto;
 592 |           padding: 1rem;
 593 |         }
 594 | 
 595 |         .modal-button {
 596 |           padding: 0.8rem 1rem;
 597 |           font-size: 0.9rem;
 598 |         }
 599 |       }
 600 | 
 601 |       @media (max-width: 380px) {
 602 |         .app-title {
 603 |           font-size: 1.8rem;
 604 |         }
 605 | 
 606 |         .app-subtitle {
 607 |           font-size: 0.8rem;
 608 |         }
 609 | 
 610 |         .control-panel {
 611 |           padding: 0.4rem;
 612 |         }
 613 | 
 614 |         .control-button {
 615 |           padding: 0.4rem 0.6rem;
 616 |           font-size: 0.75rem;
 617 |         }
 618 | 
 619 |         .utility-button {
 620 |           padding: 0.4rem 0.6rem;
 621 |           font-size: 0.75rem;
 622 |         }
 623 |       }
 624 | 
 625 |       @media (hover: none) {
 626 |         .input-field input,
 627 |         .input-field select,
 628 |         .control-button,
 629 |         .utility-button,
 630 |         .zoom-button {
 631 |           -webkit-tap-highlight-color: transparent;
 632 |         }
 633 | 
 634 |         .generate-button:active,
 635 |         .control-button:active,
 636 |         .utility-button:active,
 637 |         .zoom-button:active {
 638 |           transform: scale(0.95);
 639 |         }
 640 |       }
 641 | 
 642 |       /* Modal Styles */
 643 |       .modal {
 644 |         display: none; /* Hidden by default */
 645 |         position: fixed; /* Stay in place */
 646 |         z-index: 1000; /* Sit on top */
 647 |         left: 0;
 648 |         top: 0;
 649 |         width: 100%; /* Full width */
 650 |         height: 100%; /* Full height */
 651 |         overflow: auto; /* Enable scroll if needed */
 652 |         background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
 653 |       }
 654 | 
 655 |       .modal-content {
 656 |         background-color: var(--surface);
 657 |         margin: 15% auto; /* 15% from the top and centered */
 658 |         padding: 20px;
 659 |         border: 1px solid var(--input-border);
 660 |         border-radius: 10px;
 661 |         width: 80%; /* Could be more or less, depending on screen size */
 662 |         max-width: 600px;
 663 |         position: relative;
 664 |       }
 665 | 
 666 |       .close-button {
 667 |         color: var(--text);
 668 |         float: right;
 669 |         font-size: 28px;
 670 |         font-weight: bold;
 671 |         cursor: pointer;
 672 |       }
 673 | 
 674 |       .close-button:hover,
 675 |       .close-button:focus {
 676 |         color: #000;
 677 |         text-decoration: none;
 678 |         cursor: pointer;
 679 |       }
 680 | 
 681 |       .modal-input-field {
 682 |         margin-bottom: 15px;
 683 |       }
 684 | 
 685 |       .modal-input-field label {
 686 |         display: block;
 687 |         margin-bottom: 5px;
 688 |         color: var(--text);
 689 |       }
 690 | 
 691 |       .modal-input-field input[type="text"] {
 692 |         width: 100%;
 693 |         padding: 10px;
 694 |         border-radius: 5px;
 695 |         border: 1px solid var(--input-border);
 696 |         background-color: rgba(255, 255, 255, 0.05);
 697 |         color: var(--text);
 698 |       }
 699 | 
 700 |       .modal-actions {
 701 |         text-align: right;
 702 |         margin-top: 20px;
 703 |       }
 704 | 
 705 |       .modal-button {
 706 |         padding: 10px 20px;
 707 |         border: none;
 708 |         border-radius: 5px;
 709 |         background: linear-gradient(45deg, var(--primary), var(--secondary));
 710 |         color: var(--text);
 711 |         cursor: pointer;
 712 |         margin-left: 10px;
 713 |       }
 714 | 
 715 |       .modal-button:hover {
 716 |         opacity: 0.8;
 717 |       }
 718 | 
 719 |       .modify-container {
 720 |         background: var(--surface);
 721 |         border-radius: 12px;
 722 |         border: 1px solid var(--input-border);
 723 |         backdrop-filter: blur(15px);
 724 |         box-shadow: 0 8px 20px var(--shadow-color);
 725 |         padding: 1.5rem;
 726 |         margin: 1rem;
 727 |         width: auto;
 728 |         box-sizing: border-box;
 729 |       }
 730 | 
 731 |       .modify-container label {
 732 |         display: block;
 733 |         margin-bottom: 0.5rem;
 734 |         color: var(--text);
 735 |         font-weight: 600;
 736 |       }
 737 | 
 738 |       .modify-container textarea {
 739 |         width: 100%;
 740 |         padding: 0.8rem;
 741 |         border-radius: 8px;
 742 |         border: 1px solid var(--input-border);
 743 |         background: rgba(255, 255, 255, 0.03);
 744 |         color: var(--text);
 745 |         font-size: 0.9rem;
 746 |         resize: vertical;
 747 |         min-height: 80px;
 748 |         box-sizing: border-box;
 749 |         margin-top: 0.5rem;
 750 |       }
 751 | 
 752 |       .modify-container button {
 753 |         margin-top: 1rem;
 754 |       }
 755 | 
 756 |       @media (max-width: 768px) {
 757 |         .modify-container {
 758 |           padding: 1rem;
 759 |           margin: 0.5rem;
 760 |           width: auto;
 761 |         }
 762 | 
 763 |         .modify-container textarea {
 764 |           padding: 0.8rem;
 765 |           font-size: 0.9rem;
 766 |           min-height: 60px;
 767 |         }
 768 | 
 769 |         .modify-container label {
 770 |           font-size: 0.9rem;
 771 |         }
 772 | 
 773 |         .modify-container button {
 774 |           width: 100%;
 775 |           margin-top: 0.8rem;
 776 |         }
 777 |       }
 778 | 
 779 |       @media (max-width: 380px) {
 780 |         .modify-container {
 781 |           padding: 0.8rem;
 782 |           margin: 0.3rem;
 783 |         }
 784 | 
 785 |         .modify-container textarea {
 786 |           padding: 0.6rem;
 787 |           font-size: 0.85rem;
 788 |         }
 789 |       }
 790 |     </style>
 791 |   </head>
 792 |   <body>
 793 |     <div id="vanta-background"></div>
 794 |     <div class="container">
 795 |       <header class="app-header">
 796 |         <div class="app-logo">
 797 |           <i class="fas fa-project-diagram"></i>
 798 |         </div>
 799 |         <h1 class="app-title">ChartForge</h1>
 800 |         <p class="app-subtitle">
 801 |           Visualize your ideas and knowledge with interactive charts.
 802 |         </p>
 803 |       </header>
 804 |       <div class="form-container">
 805 |         <form id="generate-form" enctype="multipart/form-data">
 806 |           <div class="form-grid">
 807 |             <div class="input-field">
 808 |               <label for="topic-input">Topic or Algorithm</label>
 809 |               <input
 810 |                 type="text"
 811 |                 id="topic-input"
 812 |                 name="topic"
 813 |                 placeholder="e.g., Quantum Entanglement"
 814 |               />
 815 |             </div>
 816 |             <div class="input-field">
 817 |               <label for="file-input">Upload Document (PDF/DOCX)</label>
 818 |               <input
 819 |                 type="file"
 820 |                 id="file-input"
 821 |                 name="file"
 822 |                 accept=".pdf,.docx"
 823 |               />
 824 |             </div>
 825 |             <div class="input-field">
 826 |               <label for="type-select">Chart Type</label>
 827 |               <select id="type-select" name="type">
 828 |                 <option value="flowchart">Flowchart</option>
 829 |                 <option value="mind_map">Mind Map</option>
 830 |               </select>
 831 |             </div>
 832 |             <div class="input-field">
 833 |               <label for="animation-select">Animation</label>
 834 |               <select id="animation-select" name="animation">
 835 |                 <option value="static">Static</option>
 836 |                 <option value="animated">Animated</option>
 837 |               </select>
 838 |             </div>
 839 |             <div class="input-field">
 840 |               <label for="detail-select">Detail Level</label>
 841 |               <select id="detail-select" name="detail_level">
 842 |                 <option value="simple">Simple</option>
 843 |                 <option value="normal">Normal</option>
 844 |                 <option value="detailed">Detailed</option>
 845 |               </select>
 846 |             </div>
 847 |           </div>
 848 |           <button type="button" id="generate-btn" class="generate-button">
 849 |             <i class="fas fa-magic mr-2"></i> Generate Chart
 850 |           </button>
 851 |         </form>
 852 |       </div>
 853 |       <div class="chart-container" id="flowchart-container">
 854 |         <div id="flowchart" class="chart-canvas"></div>
 855 |         <div class="loader-container" id="loading-animation">
 856 |           <div class="loader"></div>
 857 |           <div class="loader-text">Crafting Your Visual...</div>
 858 |         </div>
 859 |         <button class="zoom-button" id="zoom-in-btn">
 860 |           <i class="fas fa-plus"></i>
 861 |         </button>
 862 |         <button class="zoom-button" id="zoom-out-btn">
 863 |           <i class="fas fa-minus"></i>
 864 |         </button>
 865 |         <button class="utility-button" id="fullscreen-btn">
 866 |           <i class="fas fa-expand-alt"></i> Fullscreen
 867 |         </button>
 868 |         <button class="utility-button" id="save-btn">
 869 |           <i class="fas fa-download"></i> Save Image
 870 |         </button>
 871 |         <div class="control-panel" id="animation-controls">
 872 |           <button class="control-button" id="start-animation-btn">Start</button>
 873 |           <button class="control-button" id="play-btn">
 874 |             <i class="fas fa-play"></i> Play
 875 |           </button>
 876 |           <button class="control-button" id="pause-btn">
 877 |             <i class="fas fa-pause"></i> Pause
 878 |           </button>
 879 |           <button class="control-button" id="back-btn">
 880 |             <i class="fas fa-backward"></i> Back
 881 |           </button>
 882 |           <button class="control-button" id="forward-btn">
 883 |             <i class="fas fa-forward"></i> Forward
 884 |           </button>
 885 |         </div>
 886 |       </div>
 887 |       <div class="modify-container">
 888 |         <label for="modify-prompt">Extend or Modify Chart</label>
 889 |         <textarea
 890 |           id="modify-prompt"
 891 |           placeholder="e.g., Add a step for 'Error Handling' after 'Processing Data'"
 892 |         ></textarea>
 893 |         <button type="button" id="modify-btn" class="generate-button">
 894 |           <i class="fas fa-edit mr-2"></i> Modify Chart
 895 |         </button>
 896 |       </div>
 897 |       <div class="error-message" id="error-message"></div>
 898 |     </div>
 899 | 
 900 |     <div id="addNodeModal" class="modal">
 901 |       <div class="modal-content">
 902 |         <span class="close-button" onclick="closeModal('addNodeModal')">×</span>
 903 |         <h3>Add New Node</h3>
 904 |         <div class="modal-input-field">
 905 |           <label for="nodeLabel">Node Label:</label>
 906 |           <input type="text" id="nodeLabel" />
 907 |         </div>
 908 |         <div class="modal-actions">
 909 |           <button class="modal-button" onclick="addNode()">Add Node</button>
 910 |           <button class="modal-button" onclick="closeModal('addNodeModal')">
 911 |             Cancel
 912 |           </button>
 913 |         </div>
 914 |       </div>
 915 |     </div>
 916 | 
 917 |     <script>
 918 |       // Initialize Vanta.js Globe effect for a more modern look
 919 |       VANTA.GLOBE({
 920 |         el: "#vanta-background",
 921 |         mouseControls: true,
 922 |         touchControls: true,
 923 |         gyroControls: false,
 924 |         minHeight: 200.0,
 925 |         minWidth: 200.0,
 926 |         scale: 1.0,
 927 |         scaleMobile: 0.8,
 928 |         backgroundColor: 0x111827, // Match background color
 929 |         color: 0x6c5dd3, // Primary color for the globe
 930 |         color2: 0xff7ea0, // Secondary color
 931 |         size: 1.0,
 932 |         zoom: 0.8,
 933 |       });
 934 | 
 935 |       let animationInterval = null;
 936 |       let animationData = {};
 937 |       let isAnimated = false;
 938 |       let network = null;
 939 |       let nodesDataset = new vis.DataSet([]);
 940 |       let edgesDataset = new vis.DataSet([]);
 941 |       let isModifying = false;
 942 | 
 943 |       document
 944 |         .getElementById("generate-btn")
 945 |         .addEventListener("click", function () {
 946 |           generateFlowchartData();
 947 |         });
 948 | 
 949 |       function generateFlowchartData() {
 950 |         const topic = document.getElementById("topic-input").value.trim();
 951 |         const fileInput = document.getElementById("file-input");
 952 |         const chartType = document.getElementById("type-select").value;
 953 |         const animation = document.getElementById("animation-select").value;
 954 |         const detailLevel = document.getElementById("detail-select").value;
 955 | 
 956 |         if (!topic && fileInput.files.length === 0) {
 957 |           gsap.to("#error-message", {
 958 |             duration: 0.5,
 959 |             opacity: 1,
 960 |             display: "block",
 961 |             ease: "power2.inOut",
 962 |           });
 963 |           document.getElementById("error-message").innerText =
 964 |             "Please enter a topic or upload a document.";
 965 |           return;
 966 |         }
 967 | 
 968 |         gsap.to("#flowchart-container", {
 969 |           duration: 0.5,
 970 |           opacity: 1,
 971 |           display: "block",
 972 |           scale: 1,
 973 |           ease: "power3.out",
 974 |         });
 975 |         gsap.to("#loading-animation", {
 976 |           duration: 0.3,
 977 |           opacity: 1,
 978 |           display: "flex",
 979 |           ease: "power2.inOut",
 980 |         });
 981 |         gsap.to("#error-message", {
 982 |           duration: 0.3,
 983 |           opacity: 0,
 984 |           display: "none",
 985 |           ease: "power2.inOut",
 986 |         });
 987 | 
 988 |         const formData = new FormData(document.getElementById("generate-form"));
 989 | 
 990 |         fetch("/get_flowchart_data", {
 991 |           method: "POST",
 992 |           body: formData,
 993 |         })
 994 |           .then((response) => response.json())
 995 |           .then((data) => {
 996 |             gsap.to("#loading-animation", {
 997 |               duration: 0.3,
 998 |               opacity: 0,
 999 |               display: "none",
1000 |               ease: "power2.inOut",
1001 |             });
1002 |             if (data.error) {
1003 |               gsap.to("#error-message", {
1004 |                 duration: 0.5,
1005 |                 opacity: 1,
1006 |                 display: "block",
1007 |                 ease: "power2.inOut",
1008 |               });
1009 |               document.getElementById("error-message").innerText =
1010 |                 "Error: " + data.error;
1011 |             } else {
1012 |               animationData = data;
1013 |               isAnimated = animationData.animation === "animated";
1014 |               gsap.to("#error-message", {
1015 |                 duration: 0.3,
1016 |                 opacity: 0,
1017 |                 display: "none",
1018 |                 ease: "power2.inOut",
1019 |               });
1020 |               drawFlowchart(data);
1021 |             }
1022 |           })
1023 |           .catch((error) => {
1024 |             gsap.to("#loading-animation", {
1025 |               duration: 0.3,
1026 |               opacity: 0,
1027 |               display: "none",
1028 |               ease: "power2.inOut",
1029 |             });
1030 |             gsap.to("#error-message", {
1031 |               duration: 0.5,
1032 |               opacity: 1,
1033 |               display: "block",
1034 |               ease: "power2.inOut",
1035 |             });
1036 |             document.getElementById("error-message").innerText =
1037 |               "An unexpected error occurred.";
1038 |             console.error("Error:", error);
1039 |           });
1040 |       }
1041 | 
1042 |       function drawFlowchart(data) {
1043 |         console.log("drawFlowchart called with data:", data); // LOG 1
1044 |         const container = document.getElementById("flowchart");
1045 |         if (network) {
1046 |           network.destroy();
1047 |         }
1048 |         nodesDataset.clear();
1049 |         edgesDataset.clear();
1050 | 
1051 |         const options = {
1052 |           // *** IMPORTANT FIX: Disable physics by default ***
1053 |           physics: {
1054 |             enabled: false,
1055 |           },
1056 |           layout: {
1057 |             hierarchical: {
1058 |               enabled: true,
1059 |               levelSeparation: 150,
1060 |               nodeSpacing: 200,
1061 |               treeSpacing: 250,
1062 |               direction: "UD",
1063 |               sortMethod: "directed",
1064 |               parentCentralization: true,
1065 |             },
1066 |           },
1067 |           nodes: {
1068 |             shape: "box",
1069 |             font: {
1070 |               size: 15,
1071 |               color: "#E2E8F0",
1072 |               face: "var(--font-family-body)",
1073 |             },
1074 |             borderWidth: 2,
1075 |             color: {
1076 |               background: "#1E293B",
1077 |               border: "#334155",
1078 |               highlight: {
1079 |                 background: "#7C3AED",
1080 |                 border: "#A78BFA",
1081 |               },
1082 |             },
1083 |             widthConstraint: {
1084 |               maximum: 220,
1085 |             },
1086 |             shadow: {
1087 |               enabled: true,
1088 |               color: "rgba(0,0,0,0.5)",
1089 |               size: 10,
1090 |               x: 5,
1091 |               y: 5,
1092 |             },
1093 |           },
1094 |           edges: {
1095 |             arrows: {
1096 |               to: {
1097 |                 enabled: true,
1098 |                 scaleFactor: 0.7,
1099 |                 type: "arrow",
1100 |               },
1101 |             },
1102 |             color: {
1103 |               color: "#64748B",
1104 |               highlight: "#94A3B8",
1105 |             },
1106 |             width: 2,
1107 |             smooth: {
1108 |               type: "cubicBezier",
1109 |               forceDirection: "vertical",
1110 |               roundness: 0.5,
1111 |             },
1112 |             shadow: true,
1113 |           },
1114 |           interaction: {
1115 |             multiselect: true,
1116 |             navigationButtons: true,
1117 |             keyboard: true,
1118 |             zoomSpeed: 0.5,
1119 |           },
1120 |           manipulation: {
1121 |             enabled: true,
1122 |             addNode: function (data, callback) {
1123 |               console.log("Manipulation Add Node, data: ", data);
1124 |               document.getElementById("addNodeModal").style.display = "block";
1125 |               window.newNodeCallback = callback;
1126 |             },
1127 |             editNode: function (data, callback) {
1128 |               console.log("Manipulation Edit Node, data: ", data);
1129 |               data.label = prompt("Edit Node Label", data.label);
1130 |               if (data.label !== null) {
1131 |                 fetch(`/edit_node/${data.id}`, {
1132 |                   method: "PUT",
1133 |                   headers: {
1134 |                     "Content-Type": "application/json",
1135 |                   },
1136 |                   body: JSON.stringify({ node: data }),
1137 |                 })
1138 |                   .then((response) => response.json())
1139 |                   .then((updatedNode) => {
1140 |                     console.log("Response from Edit Node:", updatedNode);
1141 |                     nodesDataset.update(updatedNode.node);
1142 |                     console.log("Nodes Dataset After Edit:", nodesDataset);
1143 |                     callback(data);
1144 |                   })
1145 |                   .catch((error) =>
1146 |                     console.error("Error updating node:", error)
1147 |                   );
1148 |               } else {
1149 |                 callback(null); // Cancelled
1150 |               }
1151 |             },
1152 |             deleteNode: function (data, callback) {
1153 |               console.log("Manipulation Delete Node, data: ", data);
1154 |               const nodeId = data.nodes[0];
1155 |               if (confirm("Are you sure you want to delete this node?")) {
1156 |                 fetch(`/delete_node/${nodeId}`, {
1157 |                   method: "DELETE",
1158 |                 })
1159 |                   .then((response) => {
1160 |                     console.log("Response from Delete Node:", response);
1161 |                     if (response.ok) {
1162 |                       console.log("Nodes Dataset before Delete:", nodesDataset);
1163 |                       console.log("Edges Dataset before Delete:", edgesDataset);
1164 |                       callback(data);
1165 |                     } else {
1166 |                       console.error("Error deleting node");
1167 |                     }
1168 |                   })
1169 |                   .catch((error) =>
1170 |                     console.error("Error deleting node:", error)
1171 |                   );
1172 |               }
1173 |             },
1174 |             addEdge: function (data, callback) {
1175 |               console.log("Manipulation Add Edge, data: ", data);
1176 |               if (data.from !== data.to) {
1177 |                 fetch("/add_edge", {
1178 |                   method: "POST",
1179 |                   headers: {
1180 |                     "Content-Type": "application/json",
1181 |                   },
1182 |                   body: JSON.stringify({ edge: data }),
1183 |                 })
1184 |                   .then((response) => response.json())
1185 |                   .then((newEdge) => {
1186 |                     console.log("Response from Add Edge:", newEdge);
1187 |                     edgesDataset.add(newEdge.edge);
1188 |                     console.log("Edges Dataset After Add:", edgesDataset);
1189 |                     callback(data);
1190 |                   })
1191 |                   .catch((error) => console.error("Error adding edge:", error));
1192 |               }
1193 |             },
1194 |             deleteEdge: function (data, callback) {
1195 |               console.log("Manipulation Delete Edge, data:", data);
1196 |               if (confirm("Are you sure you want to delete this link?")) {
1197 |                 data.edges.forEach((edgeId) => {
1198 |                   const edge = edgesDataset.get(edgeId);
1199 |                   console.log("Deleting edge:", edge);
1200 |                   fetch(`/delete_edge/${edge.from}/${edge.to}`, {
1201 |                     method: "DELETE",
1202 |                   })
1203 |                     .then((response) => {
1204 |                       console.log("Response from Delete Edge:", response);
1205 |                       if (response.ok) {
1206 |                         console.log(
1207 |                           "Edges Dataset before Delete:",
1208 |                           edgesDataset
1209 |                         );
1210 |                         callback(data);
1211 |                       } else {
1212 |                         console.error("Error deleting edge");
1213 |                       }
1214 |                     })
1215 |                     .catch((error) =>
1216 |                       console.error("Error deleting edge:", error)
1217 |                     );
1218 |                 });
1219 |               }
1220 |             },
1221 |           },
1222 |           autoResize: true,
1223 |           height: "100%",
1224 |           width: "100%",
1225 |         };
1226 |         console.log("Nodes Before Adding: ", data.nodes); // LOG 2
1227 |         console.log("Edges Before Adding: ", data.edges); // LOG 2
1228 |         network = new vis.Network(
1229 |           container,
1230 |           { nodes: nodesDataset, edges: edgesDataset },
1231 |           options
1232 |         );
1233 | 
1234 |         clearInterval(animationInterval);
1235 |         animationData.currentStep = 0;
1236 | 
1237 |         if (data.animation === "animated") {
1238 |           document.getElementById("animation-controls").style.display = "flex";
1239 |           initializeAnimation(data);
1240 |         } else {
1241 |           document.getElementById("animation-controls").style.display = "none";
1242 |           nodesDataset.add(data.nodes);
1243 |           edgesDataset.add(data.edges);
1244 |           console.log("Nodes dataset after Adding:", nodesDataset);
1245 |           console.log("Edges dataset after Adding:", edgesDataset);
1246 |         }
1247 | 
1248 |         network.on("doubleClick", function () {
1249 |           network.fit({
1250 |             animation: {
1251 |               duration: 750,
1252 |               easingFunction: "easeInOutQuint",
1253 |             },
1254 |           });
1255 |         });
1256 |       }
1257 | 
1258 |       function closeModal(modalId) {
1259 |         document.getElementById(modalId).style.display = "none";
1260 |       }
1261 | 
1262 |       function addNode() {
1263 |         const label = document.getElementById("nodeLabel").value;
1264 |         if (label) {
1265 |           const newId = Math.max(...nodesDataset.getIds(), 0) + 1;
1266 |           const newNode = { id: newId, label: label };
1267 |           fetch("/add_node", {
1268 |             method: "POST",
1269 |             headers: {
1270 |               "Content-Type": "application/json",
1271 |             },
1272 |             body: JSON.stringify({ node: newNode }),
1273 |           })
1274 |             .then((response) => response.json())
1275 |             .then((data) => {
1276 |               if (data.status === "success") {
1277 |                 nodesDataset.add(data.node);
1278 |                 window.newNodeCallback(newNode); // Call the vis.js callback
1279 |                 closeModal("addNodeModal");
1280 |               } else {
1281 |                 console.error("Error adding node:", data.message);
1282 |               }
1283 |             })
1284 |             .catch((error) => console.error("Error adding node:", error));
1285 |         }
1286 |       }
1287 |       function initializeAnimation(data) {
1288 |         resetAnimation();
1289 |         animationData.steps = [];
1290 |         let combinedElements = data.nodes
1291 |           .map((node) => ({ type: "node", element: node, order: node.order }))
1292 |           .concat(
1293 |             data.edges.map((edge) => ({
1294 |               type: "edge",
1295 |               element: edge,
1296 |               order: edge.order,
1297 |             }))
1298 |           );
1299 |         combinedElements.sort((a, b) => a.order - b.order);
1300 |         animationData.steps = combinedElements;
1301 |       }
1302 | 
1303 |       function resetAnimation() {
1304 |         nodesDataset.clear();
1305 |         edgesDataset.clear();
1306 |         animationData.currentStep = 0;
1307 |       }
1308 | 
1309 |       function playAnimation() {
1310 |         pauseAnimation();
1311 |         animationInterval = setInterval(() => {
1312 |           if (animationData.currentStep >= animationData.steps.length) {
1313 |             clearInterval(animationInterval);
1314 |             animationInterval = null;
1315 |             return;
1316 |           }
1317 |           animateStep(animationData.currentStep);
1318 |           animationData.currentStep++;
1319 |         }, 700);
1320 |       }
1321 | 
1322 |       function pauseAnimation() {
1323 |         if (animationInterval) {
1324 |           clearInterval(animationInterval);
1325 |           animationInterval = null;
1326 |         }
1327 |       }
1328 | 
1329 |       function forwardAnimation() {
1330 |         if (animationData.currentStep < animationData.steps.length) {
1331 |           animateStep(animationData.currentStep);
1332 |           animationData.currentStep++;
1333 |         }
1334 |       }
1335 | 
1336 |       function backwardAnimation() {
1337 |         if (animationData.currentStep > 0) {
1338 |           animationData.currentStep--;
1339 |           revertStep(animationData.currentStep);
1340 |         }
1341 |       }
1342 | 
1343 |       function animateStep(step) {
1344 |         let stepData = animationData.steps[step];
1345 |         if (stepData.type === "node") {
1346 |           nodesDataset.add(stepData.element);
1347 |           network.selectNodes([stepData.element.id]);
1348 |           setTimeout(() => {
1349 |             network.unselectAll();
1350 |           }, 300);
1351 |         } else if (stepData.type === "edge") {
1352 |           edgesDataset.add(stepData.element);
1353 |         }
1354 |       }
1355 | 
1356 |       function revertStep(step) {
1357 |         let stepData = animationData.steps[step];
1358 |         if (stepData.type === "node") {
1359 |           nodesDataset.remove(stepData.element.id);
1360 |         } else if (stepData.type === "edge") {
1361 |           edgesDataset.remove(stepData.element.id);
1362 |         }
1363 |       }
1364 | 
1365 |       document
1366 |         .getElementById("start-animation-btn")
1367 |         .addEventListener("click", () => {
1368 |           resetAnimation();
1369 |           playAnimation();
1370 |         });
1371 | 
1372 |       document
1373 |         .getElementById("play-btn")
1374 |         .addEventListener("click", playAnimation);
1375 |       document
1376 |         .getElementById("pause-btn")
1377 |         .addEventListener("click", pauseAnimation);
1378 |       document
1379 |         .getElementById("forward-btn")
1380 |         .addEventListener("click", forwardAnimation);
1381 |       document
1382 |         .getElementById("back-btn")
1383 |         .addEventListener("click", backwardAnimation);
1384 | 
1385 |       document.getElementById("zoom-in-btn").addEventListener("click", () => {
1386 |         network.moveTo({
1387 |           scale: network.getScale() * 1.2,
1388 |           animation: {
1389 |             duration: 250,
1390 |             easingFunction: "easeInOutQuad",
1391 |           },
1392 |         });
1393 |       });
1394 | 
1395 |       document.getElementById("zoom-out-btn").addEventListener("click", () => {
1396 |         network.moveTo({
1397 |           scale: network.getScale() * 0.8,
1398 |           animation: {
1399 |             duration: 250,
1400 |             easingFunction: "easeInOutQuad",
1401 |           },
1402 |         });
1403 |       });
1404 |       window.addEventListener("resize", () => {
1405 |         if (network) {
1406 |           network.fit({
1407 |             animation: {
1408 |               duration: 750,
1409 |               easingFunction: "easeInOutQuint",
1410 |             },
1411 |           });
1412 |         }
1413 |       });
1414 |       const flowchartContainer = document.getElementById("flowchart-container");
1415 |       const fullscreenButton = document.getElementById("fullscreen-btn");
1416 |       fullscreenButton.addEventListener("click", () => {
1417 |         if (document.fullscreenElement) {
1418 |           document.exitFullscreen();
1419 |         } else if (flowchartContainer.requestFullscreen) {
1420 |           flowchartContainer.requestFullscreen();
1421 |         } else if (flowchartContainer.mozRequestFullScreen) {
1422 |           /* Firefox */
1423 |           flowchartContainer.mozRequestFullScreen();
1424 |         } else if (flowchartContainer.webkitRequestFullscreen) {
1425 |           /* Chrome, Safari and Opera */
1426 |           flowchartContainer.webkitRequestFullscreen();
1427 |         } else if (flowchartContainer.msRequestFullscreen) {
1428 |           /* IE/Edge */
1429 |           flowchartContainer.msRequestFullscreen();
1430 |         }
1431 |       });
1432 | 
1433 |       document
1434 |         .getElementById("save-btn")
1435 |         .addEventListener("click", function () {
1436 |           const uiElements = document.querySelectorAll(
1437 |             ".zoom-button, .control-panel, .utility-button"
1438 |           );
1439 |           uiElements.forEach((el) => (el.style.visibility = "hidden"));
1440 | 
1441 |           const networkCanvas = document.querySelector(".vis-network canvas");
1442 |           const dataURL = networkCanvas.toDataURL("image/png");
1443 | 
1444 |           const link = document.createElement("a");
1445 |           link.href = dataURL;
1446 |           link.download = "chartforge_chart.png";
1447 |           document.body.appendChild(link);
1448 |           link.click();
1449 |           document.body.removeChild(link);
1450 | 
1451 |           uiElements.forEach((el) => (el.style.visibility = "visible"));
1452 |         });
1453 | 
1454 |       document
1455 |         .getElementById("modify-btn")
1456 |         .addEventListener("click", function () {
1457 |           if (isModifying) {
1458 |             gsap.to("#error-message", {
1459 |               duration: 0.5,
1460 |               opacity: 1,
1461 |               display: "block",
1462 |               ease: "power2.inOut",
1463 |             });
1464 |             document.getElementById("error-message").innerText =
1465 |               "A modification is already in progress, please wait.";
1466 |             return;
1467 |           }
1468 | 
1469 |           const prompt = document.getElementById("modify-prompt").value;
1470 |           const chartType = document.getElementById("type-select").value; // Get current chart type
1471 | 
1472 |           if (prompt.trim()) {
1473 |             isModifying = true; // Set modification flag
1474 |             gsap.to("#loading-animation", {
1475 |               duration: 0.3,
1476 |               opacity: 1,
1477 |               display: "flex",
1478 |               ease: "power2.inOut",
1479 |             });
1480 |             fetch("/modify_flowchart_prompt", {
1481 |               method: "POST",
1482 |               headers: {
1483 |                 "Content-Type": "application/json",
1484 |               },
1485 |               body: JSON.stringify({ prompt: prompt, chart_type: chartType }),
1486 |             })
1487 |               .then((response) => response.json())
1488 |               .then((data) => {
1489 |                 gsap.to("#loading-animation", {
1490 |                   duration: 0.3,
1491 |                   opacity: 0,
1492 |                   display: "none",
1493 |                   ease: "power2.inOut",
1494 |                 });
1495 |                 isModifying = false; // Clear modification flag
1496 |                 if (data.status === "success") {
1497 |                   drawFlowchart({
1498 |                     nodes: data.nodes,
1499 |                     edges: data.edges,
1500 |                     animation: animationData.animation,
1501 |                   });
1502 |                 } else {
1503 |                   gsap.to("#error-message", {
1504 |                     duration: 0.5,
1505 |                     opacity: 1,
1506 |                     display: "block",
1507 |                     ease: "power2.inOut",
1508 |                   });
1509 |                   document.getElementById("error-message").innerText =
1510 |                     "Error modifying chart: " + data.message;
1511 |                 }
1512 |               })
1513 |               .catch((error) => {
1514 |                 isModifying = false; // Clear modification flag in case of error
1515 |                 gsap.to("#loading-animation", {
1516 |                   duration: 0.3,
1517 |                   opacity: 0,
1518 |                   display: "none",
1519 |                   ease: "power2.inOut",
1520 |                 });
1521 |                 gsap.to("#error-message", {
1522 |                   duration: 0.5,
1523 |                   opacity: 1,
1524 |                   display: "block",
1525 |                   ease: "power2.inOut",
1526 |                 });
1527 |                 document.getElementById("error-message").innerText =
1528 |                   "Error modifying chart.";
1529 |                 console.error("Error modifying chart:", error);
1530 |               });
1531 |           } else {
1532 |             gsap.to("#error-message", {
1533 |               duration: 0.5,
1534 |               opacity: 1,
1535 |               display: "block",
1536 |               ease: "power2.inOut",
1537 |             });
1538 |             document.getElementById("error-message").innerText =
1539 |               "Please enter a prompt to modify the chart.";
1540 |           }
1541 |         });
1542 |       // Initial fade-in of the container
1543 |       gsap.from(".container", {
1544 |         opacity: 0,
1545 |         y: 20,
1546 |         duration: 0.8,
1547 |         delay: 0.2,
1548 |         ease: "power3.out",
1549 |       });
1550 |     </script>
1551 |   </body>
1552 | </html>
1553 | 


--------------------------------------------------------------------------------