Upload 14 files

app.py

@@ -0,0 +1,332 @@
+import logging
+from flask import Flask, render_template, request, redirect, url_for, flash
+from flask_sqlalchemy import SQLAlchemy
+import os
+import pandas as pd
+from werkzeug.utils import secure_filename
+import openpyxl
+from sqlalchemy.exc import SQLAlchemyError
+import openai, sys  # Import OpenAI library
+from dotenv import load_dotenv
+from flask_migrate import Migrate
+from openai import OpenAI
+from flask import Flask, render_template, request, redirect, url_for, flash, jsonify
+
+
+
+# Load environment variables from .env file
+load_dotenv()
+
+# Set your OpenAI API key from the .env file
+openai.api_key = os.getenv("OPENAI_API_KEY")
+
+# Configure logging
+logging.basicConfig(level=logging.DEBUG, format='%(asctime)s - %(levelname)s - %(message)s', filename='app.log', filemode='a')
+
+app = Flask(__name__)
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///jobs.db'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+app.config['UPLOAD_FOLDER'] = 'uploads'
+app.secret_key = 'your_secret_key_here'
+
+# Ensure the upload folder exists
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+db = SQLAlchemy(app)
+
+# Initialize Flask-Migrate
+migrate = Migrate(app, db)
+
+class Job(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    company = db.Column(db.String(100), nullable=False)
+    position = db.Column(db.String(200), nullable=False)
+    resume_used = db.Column(db.String(200))
+    date_applied = db.Column(db.String(20))
+    status = db.Column(db.String(50))
+    interview_details = db.Column(db.Text)
+    comments = db.Column(db.Text)
+    link = db.Column(db.String(300))
+    job_description = db.Column(db.Text)  # New field for job description
+
+    def __repr__(self):
+        return f"<Job {self.company} - {self.position}>"
+
+# Add logging to track application flow
+logging.info("Starting Flask application")
+
+@app.route('/')
+def index():
+    return redirect('/jobs')
+
+@app.route('/jobs', methods=['GET', 'POST'])
+def jobs():
+    try:
+        if request.method == 'POST':
+            logging.info("Received POST request to add a new job")
+            new_job = Job(
+                company=request.form['company'],
+                position=request.form['position'],
+                resume_used=request.form.get('resume_used'),
+                date_applied=request.form.get('date_applied'),
+                status=request.form.get('status'),
+                interview_details=request.form.get('interview_details'),
+                comments=request.form.get('comments'),
+                link=request.form.get('link')
+            )
+            db.session.add(new_job)
+            db.session.commit()
+            logging.info(f"Added new job: {new_job}")
+            return redirect(url_for('jobs'))
+
+        logging.info("Fetching all jobs from the database")
+        all_jobs = Job.query.all()
+        logging.debug(f"Retrieved jobs: {all_jobs}")
+        return render_template('jobs.html', jobs=all_jobs)
+    except SQLAlchemyError as e:
+        logging.error(f"Database error: {e}")
+        flash(f"Database error: {e}")
+        return render_template('jobs.html', jobs=[])
+
+@app.route('/edit_job/<int:job_id>', methods=['GET', 'POST'])
+def edit_job(job_id):
+    job = Job.query.get_or_404(job_id)
+
+    if request.method == 'POST':
+        # Update the job details
+        job.company = request.form['company']
+        job.position = request.form['position']
+        job.resume_used = request.form.get('resume_used')
+        job.date_applied = request.form.get('date_applied')
+        job.status = request.form.get('status')
+        job.interview_details = request.form.get('interview_details')
+        job.comments = request.form.get('comments')
+        job.link = request.form.get('link')
+        job.job_description = request.form.get('job_description')  # Update job description
+
+        db.session.commit()
+
+        # Call LLM to generate interview plan
+        if job.job_description:
+            interview_plan = generate_interview_plan(job.job_description)
+            flash(f"Interview Plan: {interview_plan}")
+
+        return redirect(url_for('jobs'))
+
+    return render_template('jobs.html', jobs=Job.query.all(), edit_job=job)
+
+# Function to generate an interview plan using OpenAI's GPT model
+def generate_interview_plan(job_description):
+    import os, sys
+    from openai import OpenAI
+
+    # Sanity check
+    print("Python exe:", sys.executable)
+    import openai as _oa
+    print("OpenAI version:", _oa.__version__)
+    print("OpenAI path:", _oa.__file__)
+
+    # Instantiate the client
+    client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
+
+    try:
+        resp = client.chat.completions.create(
+            model="gpt-4o-mini",
+            messages=[
+                {"role": "system", "content": "You are a helpful assistant."},
+                {"role": "user", "content": f"Create an interview plan for the following job description. Highlight key skills and requirements:\n{job_description}"},
+            ],
+            max_tokens=150
+        )
+
+        # Extract and return the generated text
+        return resp.choices[0].message.content.strip()
+
+    except Exception as e:
+        # This will catch everything, including rate‑limit/quota errors
+        print(f"Error ({type(e).__name__}): {e}")
+        # Optionally, if it’s a JSON‑style API error you can introspect:
+        try:
+            err = e.error if hasattr(e, "error") else None
+            print("Error details:", err)
+        except:
+            pass
+        return "Error generating interview plan. Please try again later."
+
+@app.route('/delete_job/<int:job_id>', methods=['POST'])
+def delete_job(job_id):
+    job = Job.query.get_or_404(job_id)
+    db.session.delete(job)
+    db.session.commit()
+    return redirect(url_for('jobs'))
+
+@app.route('/upload', methods=['POST'])
+def upload():
+    logging.info("Received file upload request")
+    if 'file' not in request.files:
+        logging.warning("No file part in the request")
+        flash('No file part in the request')
+        return redirect(url_for('jobs'))
+
+    file = request.files['file']
+
+    if file.filename == '':
+        logging.warning("No file selected for upload")
+        flash('No selected file')
+        return redirect(url_for('jobs'))
+
+    if file and allowed_file(file.filename):
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(filepath)
+        logging.info(f"File saved to {filepath}")
+
+        try:
+            if filename.endswith('.csv'):
+                data = pd.read_csv(filepath)
+            else:
+                data = pd.read_excel(filepath)
+
+            logging.info("Validating column headers")
+            required_columns = {'company', 'position', 'resume used', 'date applied', 'status', 'interview details', 'comments', 'link'}
+            file_columns = set(data.columns.str.strip().str.lower())
+
+            if not required_columns.issubset(file_columns):
+                missing_columns = required_columns - file_columns
+                logging.warning(f"Missing required columns: {missing_columns}")
+                flash(f"Missing required columns: {missing_columns}")
+                return redirect(url_for('jobs'))
+
+            logging.info("Normalizing column names and processing rows")
+            data.columns = data.columns.str.strip().str.lower()
+
+            # Handle column renaming and ignore unnecessary columns
+            column_mapping = {
+                'compay applied': 'company',
+                'position applied': 'position',
+                'resume used': 'resume used',
+                'date applied': 'date applied',
+                'status': 'status',
+                'interview details': 'interview details',
+                'comments': 'comments',
+                'link': 'link'
+            }
+            data.rename(columns=column_mapping, inplace=True)
+
+            # Drop unnecessary columns
+            data = data[[col for col in column_mapping.values() if col in data.columns]]
+
+            for _, row in data.iterrows():
+                new_job = Job(
+                    company=row.get('company', ''),
+                    position=row.get('position', ''),
+                    resume_used=row.get('resume used', ''),
+                    date_applied=row.get('date applied', ''),
+                    status=row.get('status', ''),
+                    interview_details=row.get('interview details', ''),
+                    comments=row.get('comments', ''),
+                    link=row.get('link', '')
+                )
+                db.session.add(new_job)
+                logging.info(f"Added job from file: {new_job}")
+
+            db.session.commit()
+            logging.info("File processed and data committed to the database")
+            flash('File uploaded and data imported successfully!')
+            return redirect(url_for('jobs'))
+        except Exception as e:
+            logging.error(f"Error processing file: {e}")
+            flash(f"Error processing file: {e}")
+
+    return redirect(url_for('jobs'))
+
+@app.route('/validate_columns', methods=['GET'])
+def validate_columns():
+    filepath = os.path.join(app.config['UPLOAD_FOLDER'], 'JobApplications.xlsx')
+
+    if not os.path.exists(filepath):
+        return "Excel file not found.", 404
+
+    # Read column names from the Excel sheet
+    workbook = openpyxl.load_workbook(filepath)
+    sheet = workbook.active
+    excel_columns = [cell.value.strip().lower() for cell in sheet[1] if cell.value]
+
+    # Define expected column names from the database
+    expected_columns = {'company', 'position', 'resume used', 'date applied', 'status', 'interview details', 'comments', 'link'}
+
+    # Compare columns
+    missing_columns = expected_columns - set(excel_columns)
+    extra_columns = set(excel_columns) - expected_columns
+
+    if missing_columns or extra_columns:
+        return f"Missing columns: {missing_columns}, Extra columns: {extra_columns}", 400
+
+    return "Column names are aligned.", 200
+@app.route('/api/chat', methods=['POST'])
+def api_chat():
+    data = request.get_json() or {}
+    user_msg = data.get('message', '').strip()
+    if not user_msg:
+        return jsonify(response="Please type something!")  # guard empty
+
+    # You can preload system/context messages here as needed
+    messages = [
+        {"role": "system", "content": "You are a helpful career coach."},
+        {"role": "user",   "content": user_msg}
+    ]
+
+    try:
+        # use your OpenAI client exactly like in prepme()
+        client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
+        chat = client.chat.completions.create(
+            model="gpt-4o-mini",
+            messages=messages,
+            max_tokens=150
+        )
+        reply = chat.choices[0].message.content.strip()
+    except Exception as e:
+        reply = f"Error: {str(e)}"
+
+    return jsonify(response=reply)
+
+@app.route('/prepme/<int:job_id>', methods=['GET'])
+def prepme(job_id):
+    job = Job.query.get_or_404(job_id)
+
+    # Load the resume from the uploads directory
+    resume_path = os.path.join(app.config['UPLOAD_FOLDER'], 'resume.docx')
+    resume_content = ""
+    if os.path.exists(resume_path):
+        import docx
+        doc = docx.Document(resume_path)
+        resume_content = "\n".join([paragraph.text for paragraph in doc.paragraphs])
+
+    # Initial context for the chatbot
+    initial_context = f"Job Description:\n{job.job_description}\n\nResume:\n{resume_content}"
+
+    # Generate initial LLM response
+    try:
+        client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
+        #logging.info(f"Initial context for OpenAI API: {initial_context}")
+        response = client.chat.completions.create(
+            model="gpt-4o-mini",
+            messages=[
+                {"role": "system", "content": "You are a career coach."},
+                {"role": "user", "content": f"Based on the following context, provide an initial response to help the user prepare for this job:\n{initial_context}"},
+            ],
+            max_tokens=150
+        )
+        initial_response = response.choices[0].message.content.strip()
+    except Exception as e:
+        logging.error(f"Error generating response from OpenAI API: {e}")
+        initial_response = "Error generating response. Please try again later."
+
+    return render_template('prepme.html', job=job, initial_context=initial_context, initial_response=initial_response)
+
+# Helper function to check allowed file extensions
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in {'csv', 'xlsx'}
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000, debug=True)

migrations/README

@@ -0,0 +1 @@
+Single-database configuration for Flask.

migrations/alembic.ini

@@ -0,0 +1,50 @@
+# A generic, single database configuration.
+
+[alembic]
+# template used to generate migration files
+# file_template = %%(rev)s_%%(slug)s
+
+# set to 'true' to run the environment during
+# the 'revision' command, regardless of autogenerate
+# revision_environment = false
+
+
+# Logging configuration
+[loggers]
+keys = root,sqlalchemy,alembic,flask_migrate
+
+[handlers]
+keys = console
+
+[formatters]
+keys = generic
+
+[logger_root]
+level = WARN
+handlers = console
+qualname =
+
+[logger_sqlalchemy]
+level = WARN
+handlers =
+qualname = sqlalchemy.engine
+
+[logger_alembic]
+level = INFO
+handlers =
+qualname = alembic
+
+[logger_flask_migrate]
+level = INFO
+handlers =
+qualname = flask_migrate
+
+[handler_console]
+class = StreamHandler
+args = (sys.stderr,)
+level = NOTSET
+formatter = generic
+
+[formatter_generic]
+format = %(levelname)-5.5s [%(name)s] %(message)s
+datefmt = %H:%M:%S

migrations/env.py

@@ -0,0 +1,113 @@
+import logging
+from logging.config import fileConfig
+
+from flask import current_app
+
+from alembic import context
+
+# this is the Alembic Config object, which provides
+# access to the values within the .ini file in use.
+config = context.config
+
+# Interpret the config file for Python logging.
+# This line sets up loggers basically.
+fileConfig(config.config_file_name)
+logger = logging.getLogger('alembic.env')
+
+
+def get_engine():
+    try:
+        # this works with Flask-SQLAlchemy<3 and Alchemical
+        return current_app.extensions['migrate'].db.get_engine()
+    except (TypeError, AttributeError):
+        # this works with Flask-SQLAlchemy>=3
+        return current_app.extensions['migrate'].db.engine
+
+
+def get_engine_url():
+    try:
+        return get_engine().url.render_as_string(hide_password=False).replace(
+            '%', '%%')
+    except AttributeError:
+        return str(get_engine().url).replace('%', '%%')
+
+
+# add your model's MetaData object here
+# for 'autogenerate' support
+# from myapp import mymodel
+# target_metadata = mymodel.Base.metadata
+config.set_main_option('sqlalchemy.url', get_engine_url())
+target_db = current_app.extensions['migrate'].db
+
+# other values from the config, defined by the needs of env.py,
+# can be acquired:
+# my_important_option = config.get_main_option("my_important_option")
+# ... etc.
+
+
+def get_metadata():
+    if hasattr(target_db, 'metadatas'):
+        return target_db.metadatas[None]
+    return target_db.metadata
+
+
+def run_migrations_offline():
+    """Run migrations in 'offline' mode.
+
+    This configures the context with just a URL
+    and not an Engine, though an Engine is acceptable
+    here as well.  By skipping the Engine creation
+    we don't even need a DBAPI to be available.
+
+    Calls to context.execute() here emit the given string to the
+    script output.
+
+    """
+    url = config.get_main_option("sqlalchemy.url")
+    context.configure(
+        url=url, target_metadata=get_metadata(), literal_binds=True
+    )
+
+    with context.begin_transaction():
+        context.run_migrations()
+
+
+def run_migrations_online():
+    """Run migrations in 'online' mode.
+
+    In this scenario we need to create an Engine
+    and associate a connection with the context.
+
+    """
+
+    # this callback is used to prevent an auto-migration from being generated
+    # when there are no changes to the schema
+    # reference: http://alembic.zzzcomputing.com/en/latest/cookbook.html
+    def process_revision_directives(context, revision, directives):
+        if getattr(config.cmd_opts, 'autogenerate', False):
+            script = directives[0]
+            if script.upgrade_ops.is_empty():
+                directives[:] = []
+                logger.info('No changes in schema detected.')
+
+    conf_args = current_app.extensions['migrate'].configure_args
+    if conf_args.get("process_revision_directives") is None:
+        conf_args["process_revision_directives"] = process_revision_directives
+
+    connectable = get_engine()
+
+    with connectable.connect() as connection:
+        context.configure(
+            connection=connection,
+            target_metadata=get_metadata(),
+            **conf_args
+        )
+
+        with context.begin_transaction():
+            context.run_migrations()
+
+
+if context.is_offline_mode():
+    run_migrations_offline()
+else:
+    run_migrations_online()

migrations/script.py.mako

@@ -0,0 +1,24 @@
+"""${message}
+
+Revision ID: ${up_revision}
+Revises: ${down_revision | comma,n}
+Create Date: ${create_date}
+
+"""
+from alembic import op
+import sqlalchemy as sa
+${imports if imports else ""}
+
+# revision identifiers, used by Alembic.
+revision = ${repr(up_revision)}
+down_revision = ${repr(down_revision)}
+branch_labels = ${repr(branch_labels)}
+depends_on = ${repr(depends_on)}
+
+
+def upgrade():
+    ${upgrades if upgrades else "pass"}
+
+
+def downgrade():
+    ${downgrades if downgrades else "pass"}

migrations/versions/7e4c2e87b8f1_add_job_description_column_to_job_table.py

@@ -0,0 +1,32 @@
+"""Add job_description column to job table
+
+Revision ID: 7e4c2e87b8f1
+Revises: 
+Create Date: 2025-04-22 09:30:40.814138
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '7e4c2e87b8f1'
+down_revision = None
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table('job', schema=None) as batch_op:
+        batch_op.add_column(sa.Column('job_description', sa.Text(), nullable=True))
+
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table('job', schema=None) as batch_op:
+        batch_op.drop_column('job_description')
+
+    # ### end Alembic commands ###

requirements.txt

@@ -0,0 +1,3 @@
+Flask
+SQLAlchemy
+alembic

templates/jobs.html

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Job Applications</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
+</head>
+<body>
+    <div class="container mt-5">
+        <h1 class="text-center">Job Applications</h1>
+
+        <!-- Tabs Navigation -->
+        <ul class="nav nav-tabs" id="jobTabs" role="tablist">
+            <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload" type="button" role="tab" aria-controls="upload" aria-selected="true">Upload Excel</button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link" id="list-tab" data-bs-toggle="tab" data-bs-target="#list" type="button" role="tab" aria-controls="list" aria-selected="false">Job List</button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link" id="add-tab" data-bs-toggle="tab" data-bs-target="#add" type="button" role="tab" aria-controls="add" aria-selected="false">Add Job</button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link" id="prepme-tab" data-bs-toggle="tab" data-bs-target="#prepme" type="button" role="tab" aria-controls="prepme" aria-selected="false">PrepMe</button>
+            </li>
+        </ul>
+
+        <!-- Tabs Content -->
+        <div class="tab-content" id="jobTabsContent">
+            <!-- Upload Excel Tab -->
+            <div class="tab-pane fade show active" id="upload" role="tabpanel" aria-labelledby="upload-tab">
+                <form method="POST" action="/upload" enctype="multipart/form-data" class="mt-4">
+                    <div class="mb-3">
+                        <label for="excelFile" class="form-label">Upload Excel File</label>
+                        <input type="file" class="form-control" id="excelFile" name="file" accept=".xlsx, .csv" required>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Upload</button>
+                </form>
+            </div>
+
+            <!-- Job List Tab -->
+            <div class="tab-pane fade" id="list" role="tabpanel" aria-labelledby="list-tab">
+                <h2 class="mt-4">Job List</h2>
+                <table class="table table-bordered">
+                    <thead>
+                        <tr>
+                            <th>Company</th>
+                            <th>Position</th>
+                            <th>Resume Used</th>
+                            <th>Date Applied</th>
+                            <th>Status</th>
+                            <th>Interview Details</th>
+                            <th>Comments</th>
+                            <th>Link</th>
+                            <th>Job Description</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for job in jobs %}
+                        <tr>
+                            <td>{{ job.company }}</td>
+                            <td>{{ job.position }}</td>
+                            <td>{{ job.resume_used }}</td>
+                            <td>{{ job.date_applied }}</td>
+                            <td>{{ job.status }}</td>
+                            <td>{{ job.interview_details }}</td>
+                            <td>{{ job.comments }}</td>
+                            <td><a href="{{ job.link }}" target="_blank">Link</a></td>
+                            <td>{{ job.job_description }}</td>
+                            <td>
+                                <form method="POST" action="/delete_job/{{ job.id }}" style="display:inline;">
+                                    <button type="submit" class="btn btn-sm btn-danger">Delete</button>
+                                </form>
+                                <a href="/edit_job/{{ job.id }}" class="btn btn-sm btn-warning">Edit</a>
+                                <button class="btn btn-sm btn-info prepme-btn" data-job-id="{{ job.id }}">PrepMe</button>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Add Job Tab -->
+            <div class="tab-pane fade" id="add" role="tabpanel" aria-labelledby="add-tab">
+                <form method="POST" action="{% if edit_job %}/edit_job/{{ edit_job.id }}{% else %}/jobs{% endif %}" class="mt-4">
+                    <div class="mb-3">
+                        <label for="company" class="form-label">Company</label>
+                        <input type="text" class="form-control" id="company" name="company" value="{{ edit_job.company if edit_job else '' }}" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="position" class="form-label">Position</label>
+                        <input type="text" class="form-control" id="position" name="position" value="{{ edit_job.position if edit_job else '' }}" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="resume_used" class="form-label">Resume Used</label>
+                        <input type="text" class="form-control" id="resume_used" name="resume_used" value="{{ edit_job.resume_used if edit_job else '' }}">
+                    </div>
+                    <div class="mb-3">
+                        <label for="date_applied" class="form-label">Date Applied</label>
+                        <input type="date" class="form-control" id="date_applied" name="date_applied" value="{{ edit_job.date_applied if edit_job else '' }}">
+                    </div>
+                    <div class="mb-3">
+                        <label for="status" class="form-label">Status</label>
+                        <select class="form-control" id="status" name="status">
+                            <option value="Applied" {% if edit_job and edit_job.status == 'Applied' %}selected{% endif %}>Applied</option>
+                            <option value="Interviewing" {% if edit_job and edit_job.status == 'Interviewing' %}selected{% endif %}>Interviewing</option>
+                            <option value="Rejected" {% if edit_job and edit_job.status == 'Rejected' %}selected{% endif %}>Rejected</option>
+                            <option value="On Hold" {% if edit_job and edit_job.status == 'On Hold' %}selected{% endif %}>On Hold</option>
+                            <option value="Offer" {% if edit_job and edit_job.status == 'Offer' %}selected{% endif %}>Offer</option>
+                        </select>
+                    </div>
+                    <div class="mb-3">
+                        <label for="interview_details" class="form-label">Interview Details</label>
+                        <textarea class="form-control" id="interview_details" name="interview_details">{{ edit_job.interview_details if edit_job else '' }}</textarea>
+                    </div>
+                    <div class="mb-3">
+                        <label for="comments" class="form-label">Comments</label>
+                        <textarea class="form-control" id="comments" name="comments">{{ edit_job.comments if edit_job else '' }}</textarea>
+                    </div>
+                    <div class="mb-3">
+                        <label for="link" class="form-label">Link</label>
+                        <input type="url" class="form-control" id="link" name="link" value="{{ edit_job.link if edit_job else '' }}">
+                    </div>
+                    <div class="mb-3">
+                        <label for="job_description" class="form-label">Job Description</label>
+                        <textarea class="form-control" id="job_description" name="job_description">{{ edit_job.job_description if edit_job else '' }}</textarea>
+                    </div>
+                    <button type="submit" class="btn btn-primary">{% if edit_job %}Update Job{% else %}Add Job{% endif %}</button>
+                </form>
+            </div>
+
+            <!-- PrepMe Tab -->
+            <div class="tab-pane fade" id="prepme" role="tabpanel" aria-labelledby="prepme-tab">
+                <h2 class="mt-4">PrepMe Chatbot</h2>
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">Job: {{ jobs[0].company }} - {{ jobs[0].position }}</h5>
+                        <p class="card-text">Job Description: {{ jobs[0].job_description }}</p>
+                    </div>
+                </div>
+                <div class="chat-container mt-4">
+                    <div id="chat-box" class="border p-3" style="height: 300px; overflow-y: scroll;">
+                        <!-- Chat messages will appear here -->
+                    </div>
+                    <div class="input-group mt-3">
+                        <input type="text" id="user-input" class="form-control" placeholder="Type your message here...">
+                        <button id="send-btn" class="btn btn-primary">Send</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Automatically switch to the Add Job tab if editing a job
+        document.addEventListener('DOMContentLoaded', function () {
+            {% if edit_job %}
+            var addTab = document.getElementById('add-tab');
+            var addContent = document.getElementById('add');
+
+            // Activate the Add Job tab
+            addTab.classList.add('active');
+            addTab.setAttribute('aria-selected', 'true');
+            addContent.classList.add('show', 'active');
+
+            // Deactivate other tabs
+            var uploadTab = document.getElementById('upload-tab');
+            var uploadContent = document.getElementById('upload');
+            var listTab = document.getElementById('list-tab');
+            var listContent = document.getElementById('list');
+
+            uploadTab.classList.remove('active');
+            uploadTab.setAttribute('aria-selected', 'false');
+            uploadContent.classList.remove('show', 'active');
+
+            listTab.classList.remove('active');
+            listTab.setAttribute('aria-selected', 'false');
+            listContent.classList.remove('show', 'active');
+            {% endif %}
+        });
+
+        document.addEventListener('DOMContentLoaded', function () {
+            const prepmeButtons = document.querySelectorAll('.prepme-btn');
+            const prepmeTab = document.getElementById('prepme-tab');
+            const prepmeContent = document.getElementById('prepme');
+
+            prepmeButtons.forEach(button => {
+                button.addEventListener('click', function () {
+                    const jobId = this.getAttribute('data-job-id');
+
+                    // Make an HTTP GET request to the /prepme/<job_id> route
+                    fetch(`/prepme/${jobId}`)
+                        .then(response => {
+                            if (!response.ok) {
+                                throw new Error('Network response was not ok');
+                            }
+                            return response.text();
+                        })
+                        .then(html => {
+                            // Update PrepMe tab content with the response HTML
+                            prepmeContent.innerHTML = html;
+
+                            // Activate the PrepMe tab
+                            prepmeTab.click();
+                        })
+                        .catch(error => {
+                            console.error('Error fetching PrepMe data:', error);
+                            alert('Failed to load PrepMe data. Please try again later.');
+                        });
+                });
+            });
+        });
+    </script>
+</body>
+</html>

templates/prepme.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PrepMe Chatbot</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
+</head>
+<body>
+  <!-- remove this line once you see it! -->
+      <div class="container mt-5">
+        <h1 class="text-center">PrepMe Chatbot</h1>
+        <div class="card">
+            <div class="card-body">
+                <h5 class="card-title">Job: {{ job.company }} - {{ job.position }}</h5>
+                <p class="card-text">Job Description: {{ job.job_description }}</p>
+                <p class="card-text">Resume: {{ initial_context.split('Resume:\n')[1] }}</p>
+            </div>
+        </div>
+
+        <div class="chat-container mt-4">
+            <div id="chat-box" class="border p-3" style="height: 300px; overflow-y: scroll;">
+                <div>Bot: {{ initial_response }}</div>
+            </div>
+            <div class="input-group mt-3">
+                <input type="text" id="user-input" class="form-control" placeholder="Type your message here...">
+                <button id="send-btn" class="btn btn-primary">Send</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+          const chatBox   = document.getElementById('chat-box');
+          const userInput = document.getElementById('user-input');
+          const sendBtn   = document.getElementById('send-btn');
+  
+          console.log('PrepMe chat loaded:', { chatBox, userInput, sendBtn });
+  
+          sendBtn.addEventListener('click', async () => {
+            const userMessage = userInput.value.trim();
+            console.log('Send clicked, message=', userMessage);
+            if (!userMessage) return;
+  
+            // Show the user’s message
+            const uDiv = document.createElement('div');
+            uDiv.textContent = `You: ${userMessage}`;
+            chatBox.appendChild(uDiv);
+            userInput.value = '';
+  
+            try {
+              const res = await fetch('/api/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message: userMessage }),
+              });
+              console.log('fetch() resolved:', res);
+  
+              if (!res.ok) {
+                const errText = await res.text();
+                throw new Error(`HTTP ${res.status}: ${errText}`);
+              }
+  
+              const { response } = await res.json();
+              console.log('API response JSON:', response);
+  
+              const bDiv = document.createElement('div');
+              bDiv.textContent = `Bot: ${response}`;
+              chatBox.appendChild(bDiv);
+              chatBox.scrollTop = chatBox.scrollHeight;
+  
+            } catch (err) {
+              console.error('Chat error:', err);
+              const errDiv = document.createElement('div');
+              errDiv.textContent = `Error: ${err.message}`;
+              chatBox.appendChild(errDiv);
+            }
+          });
+        });
+      </script>
+  
+</body>
+</html>