Update app.py

app.py

@@ -31,9 +31,10 @@ 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 that includes inline CSS and JavaScript.
+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}
 
@@ -44,20 +45,54 @@ Keep in mind the:
 - the knowledge inputs
 {crumbs}
 
-// Critical Requirements
+// Requirements
+- use simple svg rendering
+- 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.
+- It has to convey some relevant insights.
+- Take a deep breath, think step by step and think it well.
+""")
+    
+    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
-Note:
-    For advanced ones, use ONLY SVG elements or Plotly.js for compatibility with PDF rendering.
-    No external dependencies except CDN-hosted Plotly/D3
-    Add 'xmlns="http://www.w3.org/2000/svg"' attribute to SVG tags
-- White background for all elements (#ffffff)
+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
-- Include all required <script> tags for libraries
 - Use high-contrast colors (no dark backgrounds)
-- Include descriptive <title> elements for accessibility
+- use a title on the top <h3> aligned on the left
 - no introduction, conclusions, code fences -> Output the result directly
 
 // Important
@@ -65,20 +100,92 @@ Note:
 - It has to convey some relevant insights.
 - Take a deep breath, think step by step and think it well.
 
-// Preferred Patterns
-<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
-  <!-- SVG elements here -->
-</svg>
-
-OR
+// 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
+            </div>
+        </foreignObject>
+    </svg>
 
-<div id="chart">
-  <!-- Plotly chart -->
+    <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>
-<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 
-// Example of complex visual:
---- Example 1 ---
+// 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 -->
@@ -246,7 +353,7 @@ Keep in mind the:
 
 // Critical Requirements
 - Use html with css to render it, keep it sober and focused on the content
-- The output has to be boxed in a border of 1px Black and grey background (#b5b3b3)
+- The output has to be boxed in a border of 1px Black and grey background (#ede8e8)
 - Font size minimum 12px for readability in PDF
 - You have freedom on the structure, but it has to cover all potential aspects on the topic in between 500 and 1000 words
 
@@ -524,6 +631,8 @@ The report should be very detailed and lengthy — approximately the equivalent
 - Visual guidance:...
 ]]
 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
+
 - 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:
@@ -536,17 +645,13 @@ Note: the placeholders will then be processed separtely by a llm to generate the
 
 // Focus placeholders
 - To drill down on specific topic that would be deserve to be developped extensively separately, create special focus placeholders in [[...]] double backets
-- Use this format:
-
-[[Focus Placeholder n:
-- Topic of this focus:...
-- Relevant data to generate it:...
-- Writing style guidance:...
-]]
-
-with n as the reference number
 Note: outside of the placeholder, do not make reference in the report to "focus placeholders" just mention the "Focus box n".
-- in the placeholder, make a mention to the prescribed sources used 
+- in the placeholder, make a mention to the prescribed sources used
+- do not make the placeholder as the exact same topic as the section or the sub-section where it is positioned, it has to be either:
+    o a special case that deserves attention
+    o a recent development / innovation
+    o a theoretical drill-down
+    o a contrarian point of view / objection
 - these placeholders text should contain:
     o the purpose of the focus box 
     o the relevant data to generate it
@@ -555,6 +660,16 @@ Note: outside of the placeholder, do not make reference in the report to "focus
 - there should be at least {round(pages/6,0)} of these focus placeholders within the report, not all in the same section except if this is relevant for illustration.
 Note: the placeholders will then be processed separtely by a llm to generate the specific code to display each of them so the instruction need to be clear enough.
 
+// Format:
+[[Focus Placeholder n:
+- Topic of this focus:...
+- Relevant data to generate it:...
+- Writing style guidance:...
+]]
+
+with n as the reference number
+Important: after [[ put "Focus Placeholder n:" explicitly (with n as the ref number of the focus box created). This will be used in a regex
+
 // Structure of the overall report:
 - Abstract
 - Table of contents
@@ -876,9 +991,9 @@ class ReportGenerator:
     <meta charset="utf-8" />
     <style>
         body {{ font-family: Helvetica, sans-serif; margin: 40px; }}
-        h1 {{ font-size: 24pt; margin-bottom: 12px; }}
-        h2 {{ font-size: 20pt; margin-bottom: 10px; }}
-        h3 {{ font-size: 18pt; margin-bottom: 8px; }}
+        h1 {{ font-size: 24pt; margin-bottom: 12px; text-align: left; }}
+        h2 {{ font-size: 20pt; margin-bottom: 10px; text-align: left; }}
+        h3 {{ font-size: 18pt; margin-bottom: 8px; text-align: left; }}
         p {{ font-size: 11pt; line-height: 1.5; margin-bottom: 10px; }}
         ol, ul {{ font-size: 11pt; margin-left: 20px; line-height: 1.5; }}
         hr {{ border: 1px solid #ccc; margin: 20px 0; }}