Update app.py

app.py

@@ -31,8 +31,7 @@ MAX_MESSAGE_LENGTH = 1048576
 
 def generate_visual_snippet(placeholder_text: str, context: str, initial_query: str, crumbs: str) -> str:
     prompt = (f"""
-Generate a complete, self-contained HTML code snippet between <div> tags that includes inline CSS and JavaScript.
-The code should display a simple but effective and elegant visualization based on the following requirements:
+Generate a mermaid code displaying a simple but effective and elegant visualization based on the following requirements:
 {placeholder_text}
 
 It will be integrated in a broader report (in html) about:
@@ -46,276 +45,112 @@ Keep in mind the:
 {crumbs}
 
 // Requirements
-- use simple svg rendering
+- use standard mermaid visual rendering (ex: flowchart, sequence, gantt, pie, mindmap)
 - White background (#ffffff)
 - overall dimension capped at 500px x 500px
-- Font size minimum 12px for readability in PDF
-- Use high-contrast colors (no dark backgrounds)
-- use a title on the top <h3> aligned on the left
 - no introduction, conclusions or code fences -> Output the result directly
 
 // Important
-- Make the visuals content rich, there's no point having a visual if its content is pointless.
+- Make the visuals content rich, there's no point having a visual if its content has no real value.
 - It has to convey some relevant insights.
 - Take a deep breath, think step by step and think it well.
+
+// Examples
+-- flowchart --
+flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]
+
+-- sequence --
+sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!
+
+-- gantt --
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+
+-- pie --
+pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+
+-- mindmap --
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectivness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+
 """)
     
     result = openai_call(prompt, model="o3-mini", max_tokens_param=10000)
     result = result.strip().strip("```").strip()
-    logging.info(f"The code produced for this visual placeholder:\n{placeholder_text}\n\n {result}\n\n")
-    return result
-
-def generate_visual_snippet_tofix(placeholder_text: str, context: str, initial_query: str, crumbs: str) -> str:
-    prompt = (f"""
-Generate a complete, self-contained HTML code snippet between <div> tags that includes inline CSS and JavaScript.
-The code should display a simple but effective and elegant visualization based on the following requirements:
-{placeholder_text}
-It will be integrated in a broader report (in html) about:
-{initial_query}
-
-// Sources:
-Keep in mind the:
-- context:
-{context}
-- the knowledge inputs
-{crumbs}
-
-// Different types of visuals
-- There can be 2 types of visuals:
-o Simple management or ideation diagrams that can be generated in html directly (ex: ganntt chart or five forces, ... )
-o Complex diagrams requiring a library (ex: )
-Note: For advanced ones, use only the example below
-
-// Requirements
-- White background (#ffffff)
-- overall dimension capped at 500px x 500px
-- Include explicit width/height attributes in SVG tags (500px)
-- Font size minimum 12px for readability in PDF
-- Use high-contrast colors (no dark backgrounds)
-- use a title on the top <h3> aligned on the left
-- no introduction, conclusions, code fences -> Output the result directly
 
-// Important
-- Make the visuals content rich, there's no point having a visual if its content is pointless.
-- It has to convey some relevant insights.
-- Take a deep breath, think step by step and think it well.
-
-// Example of simple visual (This is a reference - use a similar structure for any other visual):
-<div class="five-forces-container">
-    <svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
-        <style>
-            .force-text {{ font: 12px Arial; fill: #333; }}
-            .force-value {{ font: bold 14px Arial; fill: #2c5282; }}
-            .connector {{ stroke: #666; stroke-width: 1; }}
-            .force-circle {{ 
-                fill: #ebf8ff;
-                stroke: #2c5282;
-                stroke-width: 2;
-                cursor: pointer;
-                transition: all 0.3s;
-            }}
-            .force-circle:hover {{ fill: #bee3f8; }}
-        </style>
-        
-        <!-- Central Title -->
-        <text x="250" y="250" text-anchor="middle" font-size="16" font-weight="bold">Ice Cream Maker Industry</text>
-
-        <!-- Five Forces Elements -->
-        <g transform="rotate(0,250,250)">
-            <circle class="force-circle" cx="250" cy="100" r="40" data-force="rivalry"/>
-            <text class="force-text" x="250" y="90" text-anchor="middle">Competitive Rivalry</text>
-            <text class="force-value" x="250" y="110" text-anchor="middle">72%</text>
-            <line class="connector" x1="250" y1="140" x2="250" y2="200"/>
-        </g>
-
-        <g transform="rotate(72,250,250)">
-            <circle class="force-circle" cx="250" cy="100" r="40" data-force="suppliers"/>
-            <text class="force-text" x="250" y="90" text-anchor="middle">Supplier Power</text>
-            <text class="force-value" x="250" y="110" text-anchor="middle">65%</text>
-            <line class="connector" x1="250" y1="140" x2="250" y2="200"/>
-        </g>
-
-        <g transform="rotate(144,250,250)">
-            <circle class="force-circle" cx="250" cy="100" r="40" data-force="buyers"/>
-            <text class="force-text" x="250" y="90" text-anchor="middle">Buyer Power</text>
-            <text class="force-value" x="250" y="110" text-anchor="middle">68%</text>
-            <line class="connector" x1="250" y1="140" x2="250" y2="200"/>
-        </g>
-
-        <g transform="rotate(216,250,250)">
-            <circle class="force-circle" cx="250" cy="100" r="40" data-force="substitutes"/>
-            <text class="force-text" x="250" y="90" text-anchor="middle">Substitutes</text>
-            <text class="force-value" x="250" y="110" text-anchor="middle">85%</text>
-            <line class="connector" x1="250" y1="140" x2="250" y2="200"/>
-        </g>
-
-        <g transform="rotate(288,250,250)">
-            <circle class="force-circle" cx="250" cy="100" r="40" data-force="new_entrants"/>
-            <text class="force-text" x="250" y="90" text-anchor="middle">New Entrants</text>
-            <text class="force-value" x="250" y="110" text-anchor="middle">58%</text>
-            <line class="connector" x1="250" y1="140" x2="250" y2="200"/>
-        </g>
-
-        <!-- Interactive Tooltip -->
-        <foreignObject x="0" y="400" width="500" height="100">
-            <div xmlns="http://www.w3.org/1999/xhtml" class="tooltip" 
-                 style="text-align:center; font-size:12px; color:#666; padding:10px">
-                Hover over any force for details
+    htmloutput = f"""    <iframe srcdoc='
+    <!DOCTYPE html>
+    <html>
+        <head>
+            <script type="module">
+                import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
+                import zenuml from "https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.1.0/dist/mermaid-zenuml.esm.min.mjs";
+                
+                async function initialize() {{
+                    await mermaid.registerExternalDiagrams([zenuml]);
+                    mermaid.initialize({{
+                        startOnLoad: true,
+                        securityLevel: "loose",
+                        theme: "default"
+                    }});
+                }}
+                
+                initialize();
+            </script>
+            <style>
+                .mermaid {{
+                    background-color: white;
+                    padding: 10px;
+                    border-radius: 5px;
+                    max-width: 100%;
+                    margin: 0 auto;
+                }}
+            </style>
+        </head>
+        <body>
+            <div class="mermaid">
+{result}
             </div>
-        </foreignObject>
-    </svg>
-
-    <script>
-        const forceData = {{
-            rivalry: "High competition from 10+ major brands. Price wars common (-15% margin impact)",
-            suppliers: "Limited dairy suppliers (3 major players control 80% market)",
-            buyers: "Consumers show high price sensitivity (68% would switch brands for 10% discount)",
-            substitutes: "Strong alternatives: frozen yogurt (+25% growth), plant-based options",
-            new_entrants: "Moderate barriers: $2M+ minimum investment, established distribution needed"
-        }};
-
-        document.querySelectorAll('.force-circle').forEach(circle => {{
-            circle.addEventListener('mouseover', function() {{
-                const force = this.dataset.force;
-                document.querySelector('.tooltip').innerHTML = 
-                    `<strong>${{this.parentNode.querySelector('text').textContent}}</strong><br>
-                     ${{forceData[force]}}`;
-            }});
-        }});
-    </script>
-</div>
-
-// Example of complex visual (This is a reference - use a similar structure for any other visual):
-<!-- Visual Placeholder 2 -->
-    <div class=\"visual-placeholder\">
-      <!-- Visual 2 Start -->
-<!DOCTYPE html>
-<html lang=\"en\">
-  <head>
-    <meta charset=\"UTF-8\" />
-    <title>AI Advancement Timeline: 2021-2025</title>
-    <style>
-      body {{
-        background-color: #ffffff;
-        font-family: Arial, sans-serif;
-        margin: 20px;
-      }}
-      h1 {{
-        text-align: left;
-        font-size: 20px;
-      }}
-      .svg-text {{
-        font-size: 12px;
-        fill: #000000;
-      }}
-      .event-circle {{
-        cursor: pointer;
-        stroke-width: 2;
-      }}
-    </style>
-  </head>
-  <body>
-    <h1>AI Advancements & Disruptions Timeline (2021-2025)</h1>
-    <svg width=\"500\" height=\"500\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-labelledby=\"titleID descID\">
-      <title id=\"titleID\">Timeline of Expected AI Disruptions and Milestones</title>
-      <desc id=\"descID\">
-        A horizontal timeline from 2021 to 2025 with event markers in blue and orange highlighting key technologies and breakthroughs.
-      </desc>
-      <!-- Draw horizontal timeline -->
-      <line x1=\"50\" y1=\"250\" x2=\"450\" y2=\"250\" stroke=\"#000000\" stroke-width=\"2\" />
-
-      <!-- 2021: Deepseek: Speed of Deployment (Disruption, blue) -->
-      <g id=\"event2021\">
-        <!-- Marker above the line -->
-        <circle cx=\"50\" cy=\"200\" r=\"10\" fill=\"#1f77b4\" class=\"event-circle\" stroke=\"#1f77b4\" />
-        <!-- Line connector -->
-        <line x1=\"50\" y1=\"210\" x2=\"50\" y2=\"250\" stroke=\"#1f77b4\" stroke-dasharray=\"4\" stroke-width=\"1\"/>
-        <!-- Text label -->
-        <text x=\"50\" y=\"185\" text-anchor=\"middle\" class=\"svg-text\">2021</text>
-        <text x=\"50\" y=\"170\" text-anchor=\"middle\" class=\"svg-text\">Deepseek: Deployment Speed</text>
-      </g>
-
-      <!-- 2022: Mobile & IoT Adoption (Breakthrough, orange) -->
-      <g id=\"event2022\">
-        <!-- Marker below the line -->
-        <circle cx=\"150\" cy=\"300\" r=\"10\" fill=\"#ff7f0e\" class=\"event-circle\" stroke=\"#ff7f0e\" />
-        <!-- Line connector -->
-        <line x1=\"150\" y1=\"250\" x2=\"150\" y2=\"290\" stroke=\"#ff7f0e\" stroke-dasharray=\"4\" stroke-width=\"1\"/>
-        <!-- Text label -->
-        <text x=\"150\" y=\"320\" text-anchor=\"middle\" class=\"svg-text\">2022</text>
-        <text x=\"150\" y=\"335\" text-anchor=\"middle\" class=\"svg-text\">Mobile & IoT Adoption</text>
-      </g>
-
-      <!-- 2023: Infinite Context Windows (Disruption, blue) -->
-      <g id=\"event2023\">
-        <!-- Marker above the line -->
-        <circle cx=\"250\" cy=\"200\" r=\"10\" fill=\"#1f77b4\" class=\"event-circle\" stroke=\"#1f77b4\" />
-        <!-- Line connector -->
-        <line x1=\"250\" y1=\"210\" x2=\"250\" y2=\"250\" stroke=\"#1f77b4\" stroke-dasharray=\"4\" stroke-width=\"1\"/>
-        <!-- Text label -->
-        <text x=\"250\" y=\"185\" text-anchor=\"middle\" class=\"svg-text\">2023</text>
-        <text x=\"250\" y=\"170\" text-anchor=\"middle\" class=\"svg-text\">Infinite Context Windows</text>
-        <text x=\"250\" y=\"155\" text-anchor=\"middle\" class=\"svg-text\">NLP Use Cases</text>
-      </g>
-
-      <!-- 2024: TTT Paradigm & New Architectures; Agentic Architecture Breakthrough (Breakthrough, orange) -->
-      <g id=\"event2024\">
-        <!-- Marker below the line -->
-        <circle cx=\"350\" cy=\"300\" r=\"10\" fill=\"#ff7f0e\" class=\"event-circle\" stroke=\"#ff7f0e\" />
-        <!-- Line connector -->
-        <line x1=\"350\" y1=\"250\" x2=\"350\" y2=\"290\" stroke=\"#ff7f0e\" stroke-dasharray=\"4\" stroke-width=\"1\"/>
-        <!-- Text label -->
-        <text x=\"350\" y=\"320\" text-anchor=\"middle\" class=\"svg-text\">2024</text>
-        <text x=\"350\" y=\"335\" text-anchor=\"middle\" class=\"svg-text\">TTT & New Architecture</text>
-        <text x=\"350\" y=\"350\" text-anchor=\"middle\" class=\"svg-text\">Agentic Breakthrough</text>
-      </g>
-
-      <!-- 2025: Convergence of Technologies (Disruption, blue) -->
-      <g id=\"event2025\">
-        <!-- Marker above the line -->
-        <circle cx=\"450\" cy=\"200\" r=\"10\" fill=\"#1f77b4\" class=\"event-circle\" stroke=\"#1f77b4\" />
-        <!-- Line connector -->
-        <line x1=\"450\" y1=\"210\" x2=\"450\" y2=\"250\" stroke=\"#1f77b4\" stroke-dasharray=\"4\" stroke-width=\"1\"/>
-        <!-- Text label -->
-        <text x=\"450\" y=\"185\" text-anchor=\"middle\" class=\"svg-text\">2025</text>
-        <text x=\"450\" y=\"170\" text-anchor=\"middle\" class=\"svg-text\">Convergence: VJEPA,</text>
-        <text x=\"450\" y=\"155\" text-anchor=\"middle\" class=\"svg-text\">Synthetic Data & Reasoning</text>
-      </g>
-    </svg>
-
-    <script>
-      // JavaScript: add click event listeners to each event marker to show more details
-      document.getElementById(\"event2021\").addEventListener(\"click\", function(evt) {{
-        alert(\"2021: Deepseek disruption accelerates deployment speeds, lowering barriers and affecting employment dynamics.\");
-      }});
-      
-      document.getElementById(\"event2022\").addEventListener(\"click\", function(evt) {{
-        alert(\"2022: Rapid adoption in Mobile & IoT sectors enhances portability and connectivity, driving operational efficiency.\");
-      }});
-      
-      document.getElementById(\"event2023\").addEventListener(\"click\", function(evt) {{
-        alert(\"2023: Infinite Context Windows usher in new use cases for NLP, expanding the scope of language model applications.\");
-      }});
-      
-      document.getElementById(\"event2024\").addEventListener(\"click\", function(evt) {{
-        alert(\"2024: TTT paradigms and new architectural designs, including agentic architectures, promise transformative methodological shifts in AI.\");
-      }});
-      
-      document.getElementById(\"event2025\").addEventListener(\"click\", function(evt) {{
-        alert(\"2025: A convergence of innovations \u2013 VJEPA integration, synthetic data, and emerging reasoning models \u2013 reshapes the AI landscape.\");
-      }});
-    </script>
-  </body>
-</html>
-<!-- Visual 2 End -->
-    </div>
-
-""")
+        </body>
+    </html>' width="100%" height="800px" style="border:none;"></iframe>
+"""
     
-    result = openai_call(prompt, model="o3-mini", max_tokens_param=10000)
-    result = result.strip().strip("```").strip()
-    logging.info(f"The code produced for this visual placeholder:\n{placeholder_text}\n\n {result}\n\n")
-    return result
+    logging.info(f"The code produced for this visual placeholder:\n{placeholder_text}\n\n {htmloutput}\n\n")
+    return htmloutput
 
 def replace_visual_placeholders(report_html: str, context: str, initial_query: str, crumbs: str) -> str:
     pattern = r"\[\[Visual Placeholder (\d+):(.*?)\]\]"  # Capture placeholder number
@@ -624,7 +459,7 @@ The report should be very detailed and lengthy — approximately the equivalent
 - Text Alignment has to be to the left, including for the titles
 
 // Visual placeholders
-- Since the generation of visuals (excluding tables) like graph or charts cannot be done through text, create special visual placeholders in this format:
+- Since the generation of visuals (excluding tables) like graph or charts cannot be done through text, create special visual placeholders that will be rendered in mermaid afterwards based on your guidance:
 [[Visual Placeholder n:
 - Purpose of this visual is:...
 - Relevant data to generate it:...
@@ -633,6 +468,7 @@ The report should be very detailed and lengthy — approximately the equivalent
 with n as the reference number
 Important: after [[ put "Visual Placeholder n:" explicitly (with n as the ref number of the focus box created). This will be used in a regex
 
+- the only types of mermaid diagram that can be generated are: flowchart, sequence, gantt, pie, mindmap // Take this into consideration when providing the instructions for the diagram
 - do not make reference in the report to "visual placeholders" just mention visuals.
 - in the placeholder, no need to add the references to the source, but make sure ALL of the data points required has a source from the learning and reference material hereafter 
 - these placeholders text should contain: