Updated files to push to render

.gitignore

@@ -1 +1,2 @@
 .vercel
+Procfile

app.py

@@ -15,7 +15,7 @@
 # Initialize Groq client
 groq_client = Groq.Client(api_key=GROQ_API_KEY)
 
-# Extract DOT definition
+# Extract DOT definition using regex
 def extract_dot_definition(groq_response):
     """Extract DOT definition using regex."""
     pattern = r"(digraph\s+\w+\s*{.*?})"
@@ -29,14 +29,26 @@ def validate_dot_definition(dot_definition):
     """Validate that the DOT definition follows the basic syntax."""
     return dot_definition.strip().startswith("digraph")
 
-# Generalized Groq Prompt
+# Generalized Groq prompt for flowchart generation
 def generate_flowchart(description):
     prompt = (
-        f"Create a flowchart in Graphviz DOT language for the following process: {description}. "
-        "The flowchart should be structured, clear, and visually distinct. "
-        "Use colors and labels to differentiate between start/end, processes, and decisions."
+        f"Create a detailed and visually distinct flowchart in Graphviz DOT language that represents the following process: {description}. "
+        "The flowchart should be well-structured and clearly defined, with each step represented as a node. "
+        "Use the following color scheme and formatting guidelines to ensure clarity and visual appeal: \n\n"
+
+        "- **Start and End Nodes**: Use a soft, light **blue** color to signify the beginning and the end of the process. Make the nodes round to indicate their special significance.\n"
+        "- **Process Nodes**: Use a **green** color for process steps, representing actions or tasks that move the process forward. These should be rectangular with slightly rounded corners.\n"
+        "- **Decision Nodes**: Use a **red** color for decision points, where the flow branches based on conditions. These nodes should be diamond-shaped to visually indicate a decision.\n"
+        "- **Connecting Edges**: Use a **blue** color for edges to represent the flow between the nodes. The edges should have arrows pointing in the direction of the flow to maintain a logical sequence.\n"
+        "- **Node Labels**: Ensure that each node is labeled clearly with a short, descriptive text explaining its role in the process.\n"
+        "- **Clarity**: Avoid unnecessary details and keep the flowchart simple to ensure readability. Ensure that there is no ambiguity in the transitions between nodes.\n"
+        "- **Layout**: The flow should be organized vertically or horizontally to ensure the layout is easy to follow. Avoid crossing lines as much as possible.\n"
+
+        "The flowchart should be easy to follow, visually distinct, and well-organized with clear labels for each step."
     )
+
     try:
+        # Generate flowchart using Groq API
         response = groq_client.chat.completions.create(
             messages=[{"role": "user", "content": prompt}],
             model="llama3-8b-8192",
@@ -52,27 +64,33 @@ def generate_flowchart(description):
         logging.error(f"Groq API Error: {e}")
         return None
 
-@app.route('//')
+# Route for homepage
+@app.route('/')
 def index():
     return render_template('index.html')
 
+# Route for generating flowchart
 @app.route('/generate_flowchart', methods=['POST'])
 def generate():
     try:
+        # Receive the description from the request body
         data = request.json
         description = data.get('description', '')
 
         if not description:
             return jsonify({"error": "No description provided"}), 400
 
+        # Generate flowchart
         dot_definition = generate_flowchart(description)
         if not dot_definition:
             return jsonify({"error": "Failed to generate flowchart"}), 500
 
+        # Return the DOT definition in the response
         return jsonify({"dot_definition": dot_definition})
     except Exception as e:
         logging.error(f"Error in /generate_flowchart endpoint: {e}")
         return jsonify({"error": "Internal Server Error"}), 500
 
+# Run the app
 if __name__ == '__main__':
-    app.run(debug=True)
+    app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))

templates/index.html

@@ -105,6 +105,75 @@
       background-color: #28a745;
       margin-top: 20px;
     }
+
+    /* Responsive Styles */
+    @media (max-width: 768px) {
+      header {
+        padding: 15px 0;
+      }
+
+      header h1 {
+        font-size: 1.5rem;
+      }
+
+      .form-container {
+        width: 90%;
+        padding: 15px;
+      }
+
+      textarea {
+        height: 100px;
+        font-size: 0.9rem;
+      }
+
+      button {
+        font-size: 0.9rem;
+        padding: 8px 16px;
+      }
+
+      #flowchart-container {
+        width: 90%;
+        padding: 15px;
+      }
+
+      #flowchart {
+        height: 300px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      header {
+        padding: 10px 0;
+      }
+
+      header h1 {
+        font-size: 1.2rem;
+      }
+
+      .form-container {
+        width: 100%;
+        padding: 10px;
+      }
+
+      textarea {
+        height: 90px;
+        font-size: 0.85rem;
+      }
+
+      button {
+        font-size: 0.85rem;
+        padding: 6px 14px;
+      }
+
+      #flowchart-container {
+        width: 100%;
+        padding: 10px;
+      }
+
+      #flowchart {
+        height: 250px;
+      }
+    }
   </style>
 </head>
 <body>