add high reasoning for code generation step + other things

Author: ahmedkhaleel2004

README.md

@@ -1,6 +1,7 @@
 [![Image](./docs/readme_img.png "GitDiagram Front Page")](https://gitdiagram.com/)
 
 ![License](https://img.shields.io/badge/license-MIT-blue.svg)
+[![Kofi](https://img.shields.io/badge/Kofi-F16061.svg?logo=ko-fi&logoColor=white)](https://ko-fi.com/ahmedkhaleel2004)
 
 # GitDiagram
 

backend/app/prompts.py

@@ -53,7 +53,7 @@
    - Color coding or shapes to distinguish between different types of components
    - A legend explaining any symbols or abbreviations used
 
-7. Emphasize the importance of keeping the diagram at an appropriate level of abstraction while still keeping a significant amount of detail and capturing the essential architectural elements.
+7. NOTE: Emphasize the importance of being very detailed and capturing the essential architectural elements. Don't overthink it too much, simply separating the project into as many components as possible is best.
 
 Present your explanation and instructions within <explanation> tags, ensuring that you tailor your advice to the specific project based on the provided file tree and README content.
 """
@@ -77,15 +77,6 @@
 3. Include both directories and specific files when relevant.
 4. If a component doesn't have a clear corresponding file or directory, simply dont include it in the map.
 
-Before providing your final answer, use the <scratchpad> to think through your process:
-1. List the key components identified in the system design.
-2. For each component, brainstorm potential corresponding directories or files.
-3. Verify your mappings by double-checking the file tree.
-
-<scratchpad>
-[Your thought process here]
-</scratchpad>
-
 Now, provide your final answer in the following format:
 
 <component_mapping>
@@ -97,6 +88,16 @@
 Remember to be as specific as possible in your mappings, only use what is given to you from the file tree, and to strictly follow the components mentioned in the explanation. 
 """
 
+# ❌ BELOW IS A REMOVED SECTION FROM THE ABOVE PROMPT USED FOR CLAUDE 3.5 SONNET
+# Before providing your final answer, use the <scratchpad> to think through your process:
+# 1. List the key components identified in the system design.
+# 2. For each component, brainstorm potential corresponding directories or files.
+# 3. Verify your mappings by double-checking the file tree.
+
+# <scratchpad>
+# [Your thought process here]
+# </scratchpad>
+
 # just adding some clear separation between the prompts
 # ************************************************************
 # ************************************************************
@@ -140,6 +141,7 @@
   - If you believe the component references a specific file, include the file path.
 - Make sure to include the full path to the directory or file exactly as specified in the component mapping.
 - It is very important that you do this for as many files as possible. The more the better.
+- IMPORTANT: these are for click events only, these paths should not be included in the diagram's node's names.
 
 Your output should be valid Mermaid.js code that can be rendered into a diagram.
 
@@ -152,7 +154,7 @@
 
 EXTREMELY Important notes on syntax!!! (PAY ATTENTION TO THIS):
 - Make sure to add colour to the diagram!!! This is extremely critical.
-- In Mermaid.js syntax, we cannot include special characters for nodes without being inside quotes! For example: `EX[/api/process (Backend)]:::api` is a syntax error but `EX["/api/process (Backend)"]:::api` is valid. This is extremely important.
+- In Mermaid.js syntax, we cannot include special characters for nodes without being inside quotes! For example: `EX[/api/process (Backend)]:::api` and `API -->|calls Process()| Backend` are two examples of syntax errors. They should be `EX["/api/process (Backend)"]:::api` and `API -->|"calls Process()"| Backend` respectively. Notice the quotes. This is extremely important. Make sure to include quotes for any string that contains special characters.
 - In Mermaid.js syntax, you cannot apply a class style directly within a subgraph declaration. For example: `subgraph "Frontend Layer":::frontend` is a syntax error. However, you can apply them to nodes within the subgraph. For example: `Example["Example Node"]:::frontend` is valid, and `class Example1,Example2 frontend` is valid.
 """
 # ^^^ note: ive generated a few diagrams now and claude still writes incorrect mermaid code sometimes. in the future, refer to those generated diagrams and add important instructions to the prompt above to avoid those mistakes. examples are best.

backend/app/routers/generate.py

@@ -179,6 +179,7 @@ async def generate(request: Request, body: ApiRequest):
                 "instructions": body.instructions,
             },
             api_key=body.api_key,
+            reasoning_effort="high",
         )
 
         # check for and remove code block tags

backend/app/services/o3_mini_openrouter_service.py

@@ -3,6 +3,7 @@
 from app.utils.format_message import format_user_message
 import tiktoken
 import os
+from typing import Literal
 
 load_dotenv()
 
@@ -16,7 +17,11 @@ def __init__(self):
         self.encoding = tiktoken.get_encoding("o200k_base")
 
     def call_o3_api(
-        self, system_prompt: str, data: dict, api_key: str | None = None
+        self,
+        system_prompt: str,
+        data: dict,
+        api_key: str | None = None,
+        reasoning_effort: Literal["low", "medium", "high"] = "medium",
     ) -> str:
         """
         Makes an API call to OpenRouter O3 and returns the response.
@@ -45,13 +50,13 @@ def call_o3_api(
                 "X-Title": "gitdiagram",  # Optional. Site title for rankings on openrouter.ai.
             },
             model="openai/o3-mini",  # Can be configured as needed
-            reasoning_effort="medium",  # Can be adjusted based on needs
+            reasoning_effort=reasoning_effort,  # Can be adjusted based on needs
             messages=[
                 {"role": "system", "content": system_prompt},
                 {"role": "user", "content": user_message},
             ],
-            max_completion_tokens=8192,  # Adjust as needed
-            temperature=0,
+            max_completion_tokens=12000,  # Adjust as needed
+            temperature=0.2,
         )
 
         if completion.choices[0].message.content is None:

src/components/loading.tsx

@@ -18,6 +18,7 @@ const messages = [
   "Finding component relationships...",
   "Linking components to code...",
   "Extracting relevant directories...",
+  "Reasoning about the diagram...",
   "Prompt engineers needed -> Check out the GitHub",
   "Shoutout to GitIngest for inspiration",
   "I need to find a way to make this faster...",