solvede mermaid in streamlit issue by rendering image first

README.md

@@ -137,8 +137,8 @@ The easiest way to run the application is using Docker, as it handles the comple
 
 1. **Clone the repository**
    ```bash
-   git clone https://github.com/yourusername/resumer.git
-   cd resumer
+   git clone https://github.com/AwaleSajil/resfit
+   cd resfit
    ```
 
 2. **Build and Run**

app.py

@@ -1,10 +1,15 @@
 import streamlit as st
+import streamlit.components.v1 as components
 import os
 import tempfile
 import json
+import textwrap
+import re
+import ast
 from typing import Optional
 from pathlib import Path
 import asyncio
+import requests
 
 # API and instructor imports
 import instructor
@@ -122,6 +127,50 @@ def get_openai_instructor_client(api_key: str):
 # ============================================
 # UTILITY FUNCTIONS
 # ============================================
+import base64
+
+import base64
+
+def mermaid_chart(code: str, height: int = 600):
+    """
+    Renders Mermaid.js diagrams in Streamlit by fetching SVG from mermaid.ink.
+    Saves the SVG locally and displays it.
+    """
+    # Clean up code
+    code = textwrap.dedent(code).strip()
+    
+    # Encode to base64
+    graphbytes = code.encode("utf8")
+    base64_bytes = base64.urlsafe_b64encode(graphbytes)
+    base64_string = base64_bytes.decode("ascii")
+    
+    # Construct URL
+    url = f"https://mermaid.ink/svg/{base64_string}"
+    
+    try:
+        # Fetch the SVG
+        response = requests.get(url)
+        if response.status_code == 200:
+            # Display as image
+            st.image(response.text, width="stretch")
+        else:
+            # Fallback: Try without the init block
+            import re
+            code_no_init = re.sub(r'%%\{init:.*?\}%%', '', code, flags=re.DOTALL).strip()
+            graphbytes_fallback = code_no_init.encode("utf8")
+            base64_bytes_fallback = base64.urlsafe_b64encode(graphbytes_fallback)
+            base64_string_fallback = base64_bytes_fallback.decode("ascii")
+            url_fallback = f"https://mermaid.ink/svg/{base64_string_fallback}"
+            
+            response_fallback = requests.get(url_fallback)
+            if response_fallback.status_code == 200:
+                 st.image(response_fallback.text, width="stretch")
+            else:
+                st.error(f"Failed to render diagram (Status: {response.status_code})")
+                st.code(code, language="mermaid")
+    except Exception as e:
+        st.error(f"Error rendering diagram: {str(e)}")
+        st.code(code, language="mermaid")
 
 def log_message(message: str):
     """Add message to processing log"""
@@ -216,7 +265,17 @@ def main():
     with col1:
         st.title("📄 ResFit: Resume Tailor AI")
         st.markdown("*Tailor your resume for any job using AI - **Preserving your Links!***")
-        st.info("💡 **Why ResFit?** Unlike other tools, this app preserves all hyperlinks in your resume (Portfolio, LinkedIn, GitHub, etc.) while tailoring the content.")
+        st.info("💡 **Why ResFit?** Unlike other tools, this app preserves all hyperlinks in your resume while tailoring the content.")
+        
+        with st.expander("🔄 How ResFit Works"):
+            # Read flowchart from file
+            flowchart_path = Path(__file__).parent / "docs" / "flowchart.mmd"
+            if flowchart_path.exists():
+                with open(flowchart_path, "r") as f:
+                    flowchart_code = f.read()
+                mermaid_chart(flowchart_code, height=800)
+            else:
+                st.error(f"Flowchart definition not found at {flowchart_path}")
     
     # ========== SIDEBAR: AUTHENTICATION ==========
     with st.sidebar:
@@ -278,7 +337,7 @@ def main():
         st.divider()
         
         # Authenticate button
-        if st.button("🔓 Authenticate", use_container_width=True, type="primary"):
+        if st.button("🔓 Authenticate", width="stretch", type="primary"):
             if api_key:
                 try:
                     if api_provider == "Gemini":
@@ -308,13 +367,16 @@ def main():
             **Model:** {st.session_state.selected_model}
             """)
             
-            if st.button("🚪 Logout", use_container_width=True):
+            if st.button("🚪 Logout", width="stretch"):
                 st.session_state.authenticated = False
                 st.session_state.api_key = None
                 st.session_state.api_provider = None
                 st.session_state.selected_model = None
                 st.session_state.aclient = None
                 st.rerun()
+
+
+        st.markdown("[![GitHub](https://img.shields.io/badge/GitHub-ResFit-181717?logo=github)](https://github.com/AwaleSajil/resfit)")
     
     # ========== MAIN CONTENT ==========
     if not st.session_state.authenticated:
@@ -434,7 +496,7 @@ def main():
         st.divider()
         
         # Start processing button
-        if st.button("🚀 Generate Tailored Resume", use_container_width=True, type="primary", key="btn_start"):
+        if st.button("🚀 Generate Tailored Resume", width="stretch", type="primary", key="btn_start"):
             # Clear processing log
             st.session_state.processing_log = []
             
@@ -525,7 +587,7 @@ def main():
                     data=st.session_state.resume_bytes,
                     file_name="original_resume.pdf",
                     mime="application/pdf",
-                    use_container_width=True
+                    width="stretch"
                 )
         
         with col2:
@@ -536,7 +598,7 @@ def main():
                     data=st.session_state.tailored_resume_pdf,
                     file_name="tailored_resume.pdf",
                     mime="application/pdf",
-                    use_container_width=True,
+                    width="stretch",
                     type="primary"
                 )
         
@@ -548,7 +610,7 @@ def main():
                     data=st.session_state.tailored_resume_tex.encode('utf-8'),
                     file_name="tailored_resume.tex",
                     mime="text/plain",
-                    use_container_width=True
+                    width="stretch"
                 )
             else:
                 st.info("LaTeX file not available")

docs/flowchart.mmd

@@ -0,0 +1,90 @@
+%%{init: {
+  'theme': 'base',
+  'themeVariables': {
+    'primaryColor': '#E1F5FE',
+    'primaryTextColor': '#01579B',
+    'lineColor': '#546E7A',
+    'clusterBkg': '#FAFAFA',
+    'clusterBorder': '#CFD8DC'
+  },
+  'flowchart': {
+    'curve': 'basis'
+  }
+}}%%
+
+graph TD
+
+    %% === STYLING DEFINITIONS ===
+    classDef user fill:#fff9c4,stroke:#fbc02d,stroke-width:2px,rx:10;
+    classDef ui fill:#e1f5fe,stroke:#0288d1,stroke-width:2px,rx:5;
+    classDef ai fill:#ffe0b2,stroke:#f57c00,stroke-width:2px,rx:10;
+    classDef process fill:#ffffff,stroke:#78909c,stroke-width:2px,rx:5;
+    classDef data fill:#e1bee7,stroke:#8e24aa,stroke-width:2px,shape:cylinder;
+    classDef output fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px,rx:5;
+
+    %% === THE DIAGRAM ===
+
+    %% 1. USER INTERFACE LAYER
+    subgraph UI_Layer ["🖥️ Frontend / Interface"]
+        User([👤 User]):::user
+        Streamlit[/"💻 Streamlit UI"/]:::ui
+        LLM["🧠 LLM Provider<br/>(OpenAI / Gemini / Claude)"]:::ui
+        
+        User -->|Uploads Files| Streamlit
+        Streamlit -.->|Configures| LLM
+    end
+
+    %% 2. THE PIPELINE (BACKEND)
+    %% Phase 1: Ingestion
+    subgraph P1 ["Phase 1: Input Processing"]
+        Parser["📄 Resume Parser<br/>(PyMuPDF4LLM)"]:::process
+        Scraper["🌐 Job Scraper<br/>(Web Engine)"]:::process
+    end
+
+    %% Phase 2: Understanding
+    subgraph P2 ["Phase 2: AI Orchestration"]
+        Extractor{{"🤖 Data Extractor"}}:::ai
+        Planner["📋 Content Planner"]:::ai
+        
+        %% Connecting P1 to P2
+        Parser --> Extractor
+        Scraper --> Extractor
+        Extractor --> Planner
+    end
+
+    %% Phase 3: Writing
+    subgraph P3 ["Phase 3: Parallel Writing"]
+        Workers{{"⚡ Async Workers"}}:::ai
+        
+        S1["📝 Summary"]:::process
+        S2["💼 Experience"]:::process
+        S3["🛠️ Skills"]:::process
+        S4["🚀 Projects"]:::process
+
+        Planner --> Workers
+        Workers --> S1
+        Workers --> S2
+        Workers --> S3
+        Workers --> S4
+    end
+
+    %% Phase 4: Assembly
+    subgraph P4 ["Phase 4: Generation"]
+        Merger["🔗 Jinja2 Merger"]:::process
+        Compiler["⚙️ PDF Compiler<br/>(LaTeX)"]:::process
+        
+        S1 --> Merger
+        S2 --> Merger
+        S3 --> Merger
+        S4 --> Merger
+        Merger --> Compiler
+    end
+
+    %% 3. OUTPUT
+    Result([📄 Final PDF]):::output
+
+    %% === CROSS CONNECTIONS ===
+    Streamlit --> Parser
+    Streamlit --> Scraper
+    
+    Compiler --> Result

notebooks/9_test_mermaid.ipynb

@@ -0,0 +1,375 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%reload_ext autoreload\n",
+    "%autoreload 2"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Added to path: /Users/sawale/Documents/learning/resumer\n"
+     ]
+    }
+   ],
+   "source": [
+    "import sys\n",
+    "import os\n",
+    "from pathlib import Path\n",
+    "\n",
+    "# Use Path.cwd() instead of __file__ in Notebooks\n",
+    "parent_dir = str(Path.cwd().parent)\n",
+    "\n",
+    "if parent_dir not in sys.path:\n",
+    "    sys.path.append(parent_dir)\n",
+    "\n",
+    "print(f\"Added to path: {parent_dir}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import os\n",
+    "import instructor\n",
+    "from google import genai\n",
+    "from dotenv import load_dotenv\n",
+    "\n",
+    "load_dotenv()\n",
+    "\n",
+    "# 1. Initialize the GenAI Client for Google AI Studio (API Key)\n",
+    "# Make sure GEMINI_API_KEY is set in your .env file\n",
+    "native_client = genai.Client(\n",
+    "    api_key=os.environ.get(\"GEMINI_API_KEY\")\n",
+    ")\n",
+    "\n",
+    "# 2. Patch the client with Instructor\n",
+    "# The mode remains GENAI_STRUCTURED_OUTPUTS\n",
+    "aclient = instructor.from_genai(\n",
+    "    native_client, \n",
+    "    # mode=instructor.Mode.GENAI_STRUCTURED_OUTPUTS, \n",
+    "    mode=instructor.Mode.GENAI_TOOLS,\n",
+    "    use_async=True\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "<instructor.core.client.AsyncInstructor at 0x1357b5190>"
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "aclient"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Consider using the pymupdf_layout package for a greatly improved page layout analysis.\n"
+     ]
+    }
+   ],
+   "source": [
+    "from resumer import ResumeTailorPipeline"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pp = ResumeTailorPipeline(\n",
+    "    aclient = aclient, \n",
+    "    model_name = \"gemini-3-pro-preview\",\n",
+    "    resume_path = \"/Users/sawale/Documents/learning/resumer/resumer/demo/Sajil_Awale_CV_2025.pdf\", \n",
+    "    output_dir= \"./output/\"\n",
+    ")\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "--- Scraping job details from: https://lifeattiktok.com/search/7527589557336869138 ---\n",
+      "--- Extracting job info via LLM ---\n",
+      "--- Cache miss: Extracting resume info via LLM ---\n",
+      "--- Successfully extracted both Resume and Job data ---\n",
+      "--- Adding section: summary ---\n",
+      "--- Adding section: work_experience ---\n",
+      "--- Adding section: education ---\n",
+      "--- Adding section: skill_sections ---\n",
+      "--- Adding section: projects ---\n",
+      "--- Adding section: certifications ---\n",
+      "--- Adding section: achievements ---\n",
+      "--- Adding section: research_works ---\n",
+      "## LLM decided this section is not relevant ##\n",
+      "--- Adding section: Exchange Program and Fellowship ---\n",
+      "--- Adding section: Volunteering and Teaching experience ---\n",
+      "--- Adding section: References ---\n",
+      "Running command: pdflatex -interaction=nonstopmode -output-directory=./output ./output/tailored_resume.tex\n",
+      "PDF generated at: ./output/tailored_resume.pdf\n"
+     ]
+    }
+   ],
+   "source": [
+    "await pp.generate_tailored_resume(job_url=\"https://lifeattiktok.com/search/7527589557336869138\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from resumer.utils.latex_ops import json_to_latex_pdf\n",
+    "x = json_to_latex_pdf(pp.resume_details, os.path.join(pp.output_dir, \"tailored_resume.pdf\"))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pp.resume_details"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pp.resume_details[\"custom_sections\"].keys()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pp.resume_details[\"custom_sections\"][\"References\"]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pp.resume_details[\"custom_sections\"]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pp.resume_info.model_dump()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pp.job_info"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pp.resume_info.model_dump().keys()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# loop through custom sections\n",
+    "for section in getattr(pp.resume_info, \"custom_sections\"):\n",
+    "    temp = section.section_name\n",
+    "    print(temp.plain_text)\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pp.resume_info.custom_sections[2].model_dump()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pp.resume_info.custom_sections"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# convert the custom section to structure like other noraml section\n",
+    "custom_output = {}\n",
+    "\n",
+    "\n",
+    "# loop trhough custom section\n",
+    "for csection in pp.resume_info.custom_sections:\n",
+    "    # setting the key\n",
+    "    key_name = csection.section_name.plain_text\n",
+    "    custom_output[key_name] = csection.model_dump()[\"section_detail\"]\n",
+    "    print(type(custom_output[key_name]))\n",
+    "\n",
+    "\n",
+    "# custom_output"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "type(pp.resume_info.model_dump_json(include={\"summary\"}))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pp.resume_info.model_dump_json(include={\"work_experience\"})"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pp.resume_info.model_dump_json(include={\"skill_sections\"})"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "AttributeError",
+     "evalue": "module 'google.genai' has no attribute 'configure'",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[31m---------------------------------------------------------------------------\u001b[39m",
+      "\u001b[31mAttributeError\u001b[39m                            Traceback (most recent call last)",
+      "\u001b[36mCell\u001b[39m\u001b[36m \u001b[39m\u001b[32mIn[4]\u001b[39m\u001b[32m, line 10\u001b[39m\n\u001b[32m      4\u001b[39m \u001b[38;5;28;01mfrom\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[34;01mdotenv\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[38;5;28;01mimport\u001b[39;00m load_dotenv\n\u001b[32m      6\u001b[39m load_dotenv()\n\u001b[32m---> \u001b[39m\u001b[32m10\u001b[39m \u001b[43mgenai\u001b[49m\u001b[43m.\u001b[49m\u001b[43mconfigure\u001b[49m(api_key=os.environ.get(\u001b[33m\"\u001b[39m\u001b[33mGEMINI_API_KEY\u001b[39m\u001b[33m\"\u001b[39m))\n\u001b[32m     12\u001b[39m \u001b[38;5;28;01mfor\u001b[39;00m m \u001b[38;5;129;01min\u001b[39;00m genai.list_models():\n\u001b[32m     13\u001b[39m     \u001b[38;5;28;01mif\u001b[39;00m \u001b[33m'\u001b[39m\u001b[33mgenerateContent\u001b[39m\u001b[33m'\u001b[39m \u001b[38;5;129;01min\u001b[39;00m m.supported_generation_methods:\n",
+      "\u001b[31mAttributeError\u001b[39m: module 'google.genai' has no attribute 'configure'"
+     ]
+    }
+   ],
+   "source": [
+    "import os\n",
+    "import instructor\n",
+    "from google import genai\n",
+    "from dotenv import load_dotenv\n",
+    "\n",
+    "load_dotenv()\n",
+    "\n",
+    "\n",
+    "\n",
+    "genai.configure(api_key=os.environ.get(\"GEMINI_API_KEY\"))\n",
+    "\n",
+    "for m in genai.list_models():\n",
+    "    if 'generateContent' in m.supported_generation_methods:\n",
+    "        print(f\"Model Name: {m.name}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "resumer",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.7"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

requirements.txt

@@ -1,7 +1,7 @@
 google-genai
 anthropic
 openai
-streamlit>=1.28.0
+streamlit>=1.31.0
 instructor>=1.0.0
 instructor[google-genai]
 google-cloud-aiplatform
@@ -12,4 +12,5 @@ requests
 trafilatura
 undetected-chromedriver
 jinja2
-python-dotenv
+python-dotenv
+streamlit-mermaid

sync_docs.py

@@ -0,0 +1,38 @@
+import re
+from pathlib import Path
+
+def sync_flowchart():
+    mmd_path = Path("docs/flowchart.mmd")
+    readme_path = Path("README.md")
+
+    if not mmd_path.exists():
+        print(f"Error: {mmd_path} not found")
+        return
+
+    if not readme_path.exists():
+        print(f"Error: {readme_path} not found")
+        return
+
+    with open(mmd_path, "r") as f:
+        mmd_content = f.read().strip()
+
+    with open(readme_path, "r") as f:
+        readme_content = f.read()
+
+    # Regex to find the mermaid block in README.md
+    # It looks for ```mermaid ... ```
+    pattern = r"```mermaid\n(.*?)\n```"
+    
+    new_mermaid_block = f"```mermaid\n{mmd_content}\n```"
+    
+    if re.search(pattern, readme_content, re.DOTALL):
+        new_readme_content = re.sub(pattern, new_mermaid_block, readme_content, flags=re.DOTALL)
+        
+        with open(readme_path, "w") as f:
+            f.write(new_readme_content)
+        print("Successfully synced flowchart to README.md")
+    else:
+        print("Could not find mermaid block in README.md")
+
+if __name__ == "__main__":
+    sync_flowchart()