Principles of Agentic Code Development

All About Technology: Index of Lessons in Technology

Ref: Link to full course on DeepLearning.ai

Tags: Generative AI,Large Language Models,Algorithms,Python,JavaScript,Technology,

Testing Connection With PythonAnywhere Hosted MySQL DB

To See All Articles About Technology: Index of Lessons in Technology

Setup
$ pip install mysql-connector-python
$ pip install sshtunnel

Code

import mysql.connector
import sshtunnel

# Set SSH timeout values
sshtunnel.SSH_TIMEOUT = 10.0
sshtunnel.TUNNEL_TIMEOUT = 10.0

with sshtunnel.SSHTunnelForwarder(
    ('ssh.pythonanywhere.com', 22),   # Correct SSH host format
    ssh_username='ashishjain1547',
    ssh_password='***',
    remote_bind_address=('ashishjain1547.mysql.pythonanywhere-services.com', 3306)
) as tunnel:
    print("✅ SSH Tunnel established")


    try:
        print("🔄 Attempting to connect to database...")

        # Open MySQL connection via the tunnel
        connection = mysql.connector.connect(
            user='ashishjain1547',
            password='***',
            host='127.0.0.1',
            port=tunnel.local_bind_port,
            database='ashishjain1547$dev_keshav',
            connection_timeout=30  # Increased timeout for stability
        )
        print(connection)
        if connection.is_connected():
            print("✅ Database connection successful!")

            # Create cursor
            cursor = connection.cursor()

            # Create 'users' table
            create_table_query = """
            CREATE TABLE IF NOT EXISTS users (
                id INT AUTO_INCREMENT PRIMARY KEY,
                username VARCHAR(50) NOT NULL
            )
            """
            cursor.execute(create_table_query)
            print("✅ Table 'users' created successfully!")

            # Insert sample data into the table
            insert_data_query = """
            INSERT INTO users (username) VALUES 
            ('Alice'),
            ('Bob'),
            ('Charlie')
            """
            cursor.execute(insert_data_query)
            connection.commit()
            print("✅ Sample data inserted successfully!")

            # Display data from the table
            cursor.execute("SELECT * FROM users")
            records = cursor.fetchall()
            print("📋 Users Table Data:")
            for row in records:
                print(f"ID: {row[0]}, Username: {row[1]}")

        else:
            print("❌ Database connection failed.")
    
    except mysql.connector.Error as e:
        print(f"❌ Error connecting to database: {e}")
    
    finally:
        if 'connection' in locals() and connection.is_connected():
            connection.close()
            print("✅ Database connection closed.")    


Output
1st Run On my Ubuntu laptop



3rd run on my Windows laptop



Ref

Tags: Cloud,Python,Database,Technology,

Fixing CORS Issue For A Flask App

To See All Articles About Technology: Index of Lessons in Technology

~~~

Fixing CORS Issues in Flask Applications
Introduction
If you are working on a Flask-based web application and trying to make requests from a frontend (like React, Angular, or plain JavaScript), you might encounter CORS (Cross-Origin Resource Sharing) errors. A common error message looks like this:
Access to fetch at 'http://127.0.0.1:5000/transcribe_speech' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
This error occurs because browsers enforce the Same-Origin Policy, preventing web applications from making requests to a different domain or port than the one that served the web page.
Understanding CORS
CORS is a security feature implemented in web browsers to prevent unauthorized cross-origin requests. By default, browsers restrict requests between different origins unless the server explicitly allows it using CORS headers.
Example of a CORS Error Scenario
Frontend: Runs on http://localhost:3000 (React, Vue, or another client-side framework).
Backend: Flask API running on http://127.0.0.1:5000.
Request: A fetch or XMLHttpRequest call from the frontend to http://127.0.0.1:5000/transcribe_speech.
Issue: Since the frontend and backend are on different ports, the browser blocks the request due to CORS restrictions.
Fixing CORS in Flask
To resolve this issue, you need to configure your Flask backend to include appropriate CORS headers.
Solution: Using Flask-CORS
The easiest way to handle CORS in a Flask application is by using the flask-cors package.
Steps to Fix the Issue:
Install Flask-CORS
pip install flask-cors
Modify Your Flask App
Update your Flask server code to allow CORS by importing and initializing CORS.
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # Enables CORS for all routes

@app.route("/transcribe_speech", methods=["POST"])
def transcribe_speech():
    return jsonify({"message": "Speech transcribed successfully"})

if __name__ == "__main__":
    app.run(debug=True)
Allow Specific Origins
If you want to allow only specific origins instead of enabling CORS for all requests:
CORS(app, origins=["http://localhost:3000"])
Enable CORS for Specific Routes
from flask_cors import cross_origin

@app.route("/transcribe_speech", methods=["POST"])
@cross_origin(origin='http://localhost:3000', headers=['Content-Type'])
def transcribe_speech():
    return jsonify({"message": "Speech transcribed successfully"})
Alternative Fixes
Setting Headers Manually
Instead of using Flask-CORS, you can manually set the headers in your response:
from flask import Flask, request, jsonify

app = Flask(__name__)

@app.after_request
def add_cors_headers(response):
    response.headers["Access-Control-Allow-Origin"] = "*"
    response.headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, DELETE, OPTIONS"
    response.headers["Access-Control-Allow-Headers"] = "Content-Type"
    return response
Using Proxy in Development
If modifying the backend is not an option, you can set up a proxy in your frontend to avoid CORS issues.
For React (in package.json):
"proxy": "http://127.0.0.1:5000"
For Vue (in vue.config.js):
module.exports = {
  devServer: {
    proxy: "http://127.0.0.1:5000"
  }
};
Conclusion
CORS errors in Flask applications are common but can be easily resolved by configuring your backend to send the correct headers. Using flask-cors is the simplest approach, but manual configuration or setting up a proxy are also viable solutions. By implementing one of these fixes, you can ensure smooth communication between your frontend and backend.









Fixing CORS Issues in Flask Applications Using flask_cors
Understanding the CORS Issue
Cross-Origin Resource Sharing (CORS) is a security feature implemented in web browsers that restricts web pages from making requests to a different domain than the one that served the web page. This is done to prevent malicious websites from accessing sensitive user data on other sites.
In a Flask-based web application, you may encounter a CORS error when trying to make an API call from a front-end client (such as a React or JavaScript-based web application) to a Flask backend running on a different port or domain. The error message typically looks like this:
Access to fetch at 'http://127.0.0.1:5000/transcribe_speech' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Root Cause of the Issue
By default, Flask does not include CORS headers in its responses. This means that if a browser detects an AJAX request to a different origin, it blocks the request due to security policies unless the server explicitly allows it.
The error occurs because the Flask server is not configured to handle CORS requests properly, and the browser refuses to process the response due to missing Access-Control-Allow-Origin headers.
Fixing the Issue with flask_cors
The easiest way to resolve this issue in a Flask application is by using the flask_cors package, which automatically adds the necessary CORS headers to the responses.
Step 1: Install flask_cors
If you haven't already installed flask_cors, you can do so using pip:
pip install flask_cors
Step 2: Enable CORS in Your Flask Application
Modify your Flask application to import and use CORS from flask_cors.
Option 1: Enable CORS for the Entire Application
This method enables CORS for all routes in your Flask app.
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # This will allow all domains to access your API

@app.route('/transcribe_speech', methods=['POST'])
def transcribe():
    data = request.json  # Process your request here
    return jsonify({"message": "Speech transcribed successfully!"})

if __name__ == '__main__':
    app.run(debug=True)
Option 2: Enable CORS for Specific Routes
If you want more control over which routes allow CORS, you can enable it on specific endpoints:
from flask_cors import cross_origin

@app.route('/transcribe_speech', methods=['POST'])
@cross_origin()  # This will add CORS headers only to this route
def transcribe():
    data = request.json  # Process your request here
    return jsonify({"message": "Speech transcribed successfully!"})
Option 3: Restrict CORS to Specific Origins
For added security, you can allow only specific origins instead of enabling CORS globally:
CORS(app, resources={r"/transcribe_speech": {"origins": "http://localhost:3000"}})
This ensures that only requests from http://localhost:3000 are allowed, preventing unauthorized access from other domains.
Step 3: Restart Your Flask Server
After making these changes, restart your Flask server:
flask run
Now, your front-end application should be able to successfully communicate with your Flask backend without encountering CORS errors.
Conclusion
CORS errors in Flask applications are a common issue when working with front-end and back-end applications running on different domains or ports. By using the flask_cors package, you can easily enable CORS for your application and avoid these errors while maintaining security.
By properly configuring CORS, you can ensure that your APIs remain accessible to your web clients while preventing unauthorized cross-origin requests.

Tags: Python,Web Development,Technology,

Flask endpoint to receive an audio recording and save to disk

To See All Articles About Technology: Index of Lessons in Technology

Create a flask endpoint that receives a post request from an HTML form to receive a recording and saves it to disk.
Provide the flask code and the associated HTML/JS

Here’s how you can build a Flask-based backend that receives an audio file from an HTML form and saves it to disk.

---

1️⃣ Flask Backend (app.py)

This Flask server will handle POST requests, receive the uploaded audio file, and save it locally.

python
from flask import Flask, request, render_template, jsonify
    import os
    
    app = Flask(__name__)
    
    # Ensure uploads directory exists
    UPLOAD_FOLDER = "uploads"
    os.makedirs(UPLOAD_FOLDER, exist_ok=True)
    
    @app.route("/")
    def index():
        return render_template("index.html")  # Serves the frontend
    
    @app.route("/upload", methods=["POST"])
    def upload_audio():
        if "audio" not in request.files:
            return jsonify({"error": "No file part"}), 400
    
        audio_file = request.files["audio"]
        if audio_file.filename == "":
            return jsonify({"error": "No selected file"}), 400
    
        save_path = os.path.join(UPLOAD_FOLDER, audio_file.filename)
        audio_file.save(save_path)
    
        return jsonify({"message": "File uploaded successfully", "file_path": save_path})
    
    if __name__ == "__main__":
        app.run(debug=True, port=5000)
    

---

2️⃣ Frontend (templates/index.html)

This page allows users to record audio and send it to the Flask backend.

html
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Audio Recorder</title>
    </head>
    <body>
        <h2>Record and Upload Audio</h2>
        <button id="start">Start Recording</button>
        <button id="stop" disabled>Stop Recording</button>
        <audio id="audioPlayback" controls></audio>
        <button id="upload" disabled>Upload</button>
        <p id="status"></p>
    
        <script>
            let mediaRecorder;
            let audioChunks = [];
    
            document.getElementById("start").addEventListener("click", async () => {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);
                
                mediaRecorder.ondataavailable = event => {
                    audioChunks.push(event.data);
                };
    
                mediaRecorder.onstop = async () => {
                    const audioBlob = new Blob(audioChunks, { type: "audio/wav" });
                    document.getElementById("audioPlayback").src = URL.createObjectURL(audioBlob);
                    document.getElementById("upload").disabled = false;
                };
    
                audioChunks = [];
                mediaRecorder.start();
                document.getElementById("start").disabled = true;
                document.getElementById("stop").disabled = false;
            });
    
            document.getElementById("stop").addEventListener("click", () => {
                mediaRecorder.stop();
                document.getElementById("start").disabled = false;
                document.getElementById("stop").disabled = true;
            });
    
            document.getElementById("upload").addEventListener("click", async () => {
                const audioBlob = new Blob(audioChunks, { type: "audio/wav" });
                const formData = new FormData();
                formData.append("audio", audioBlob, "recording.wav");
    
                const response = await fetch("/upload", {
                    method: "POST",
                    body: formData,
                });
    
                const result = await response.json();
                document.getElementById("status").textContent = result.message;
            });
        </script>
    </body>
    </html>
    

---

How It Works

1. User clicks "Start Recording" → The browser records audio.
2. User clicks "Stop Recording" → The recording is stored in memory.
3. User clicks "Upload" → The recorded audio is sent to the Flask server via Fetch API.
4. Flask saves the file in the uploads/ folder.

---

Running the App

1. Install dependencies:

   bash
   pip install flask
       

2. Start the Flask server:

   bash
   python app.py
       

3. Open your browser and go to:
   👉 http://127.0.0.1:5000/

Would you like to extend this with speech-to-text transcription? 🚀

Tags: Python,Technology,Web Development,

Flask Issue of "Address already in use" in PythonAnywhere Cloud

To See All Articles About Technology: Index of Lessons in Technology

Project Setup X:

Issue of: "Address already in use"

* Serving Flask app '__main__' (lazy loading)
* Environment: production
  WARNING: This is a development server. Do not use it in a production deployment.
  Use a production WSGI server instead.
* Debug mode: on
Address already in use
Port 5000 is in use by another program. Either identify and stop that program, or start the server with a different port.
Traceback (most recent call last):
  File "/usr/local/lib/python3.10/site-packages/werkzeug/serving.py", line 908, in prepare_socket
    s.bind(server_address)
OSError: [Errno 98] Address already in use


FIX:
if __name__ == '__main__':
    app.run(debug=True, port=5002, use_reloader=False)


Project Setup For ASR

04:47 ~ $ python app_pt.py 
2025-03-09 04:49:18.556050: W tensorflow/stream_executor/platform/default/dso_loader.cc:64] Could not load dynamic library 'libcudart.so.11.0'; dlerror: libcudart.so.11.0: cannot open shared object file: No such file or directory; LD_LIBRARY_PATH: /usr/local/lib/python3.10/site-packages/cv2/../../lib64:
2025-03-09 04:49:18.556080: I tensorflow/stream_executor/cuda/cudart_stub.cc:29] Ignore above cudart dlerror if you do not have a GPU set up on your machine.
    * Serving Flask app 'app_pt' (lazy loading)
    * Environment: production
    WARNING: This is a development server. Do not use it in a production deployment.
    Use a production WSGI server instead.
    * Debug mode: on
Address already in use
Port 5000 is in use by another program. Either identify and stop that program, or start the server with a different port.



05:08 ~ $ tail -3 app_pt.py 
if __name__ == "__main__":
    # Run the server on port 5000 and listen on all interfaces.
    app.run(host="0.0.0.0", port=5001, debug=False)


04:59 ~ $ python app_pt.py 
2025-03-09 05:01:13.156268: W tensorflow/stream_executor/platform/default/dso_loader.cc:64] Could not load dynamic library 'libcudart.so.11.0'; dlerror: libcudart.so.11.0: cannot open shared object file: No such file or directory; LD_LIBRARY_PATH: /usr/local/lib/python3.10/site-packages/cv2/../../lib64:
2025-03-09 05:01:13.156294: I tensorflow/stream_executor/cuda/cudart_stub.cc:29] Ignore above cudart dlerror if you do not have a GPU set up on your machine.
    * Serving Flask app 'app_pt' (lazy loading)
    * Environment: production
    WARNING: This is a development server. Do not use it in a production deployment.
    Use a production WSGI server instead.
    * Debug mode: off
Address already in use
Port 5001 is in use by another program. Either identify and stop that program, or start the server with a different port.
05:03 ~ $ 



05:09 ~ $ tail -3 app_pt.py 
if __name__ == "__main__":
    # Run the server on port 5000 and listen on all interfaces.
    app.run(host="0.0.0.0", port=5001, debug=False, use_reloader=False)




05:09 ~ $ python app_pt.py 
2025-03-09 05:11:43.255847: W tensorflow/stream_executor/platform/default/dso_loader.cc:64] Could not load dynamic library 'libcudart.so.11.0'; dlerror: libcudart.so.11.0: cannot open shared object file: No such file or directory; LD_LIBRARY_PATH: /usr/local/lib/python3.10/site-packages/cv2/../../lib64:
2025-03-09 05:11:43.255871: I tensorflow/stream_executor/cuda/cudart_stub.cc:29] Ignore above cudart dlerror if you do not have a GPU set up on your machine.
    * Serving Flask app 'app_pt' (lazy loading)
    * Environment: production
    WARNING: This is a development server. Do not use it in a production deployment.
    Use a production WSGI server instead.
    * Debug mode: off
Address already in use
Port 5001 is in use by another program. Either identify and stop that program, or start the server with a different port.
05:13 ~

The way to resolve this is to not attempt to run a 'flask app' as a Python Script. Rather use 'Web' app configuration of PythonAnywhere as shown below:

Below screen is not the actual one but only for demo purpose...

Tags: Python,Cloud,Technology,Web Development,