proper commit

.gitignore

@@ -0,0 +1,8 @@
+#python cache 
+**/__pycache__/
+
+
+#my files
+
+trial.py
+test/

Dockerfile

@@ -0,0 +1,14 @@
+# read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.9
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . .
+
+CMD ["gunicorn","-b","0.0.0.0:7860", "app:app","--timeout","950"]

README.md

@@ -8,3 +8,80 @@ pinned: false
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+
+
+# TranscriptApi
+
+TranscriptApi is a backend service written in Flask that provides a RESTful API for summarizing YouTube videos or uploaded files using deep learning models. It allows users to extract and summarize the textual content from video or audio files, enabling easy access to key information.
+
+## Table of Contents
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+
+## Features
+
+- Extract and summarize textual content from YouTube videos or uploaded files.
+- Utilizes deep learning models for accurate and efficient summarization.
+- Provides a RESTful API for easy integration with other applications.
+- Supports customization and configuration options to meet specific requirements.
+
+## Installation
+
+1. Clone the repository:
+
+```
+git clone https://github.com/th3bossc/TranscriptApi.git
+```
+
+2. Navigate to the project directory:
+
+```
+cd TranscriptApi
+```
+
+3. Install the required dependencies using pip:
+
+```
+pip install -r requirements.txt
+```
+
+4. Set up the necessary configuration variables, such as API keys, in the `.env` file.
+
+5. Run the Flask development server:
+
+```
+python app.py
+```
+
+The server should now be running locally at `http://localhost:5000`.
+
+## Usage
+
+To utilize the TranscriptApi service, you can make requests to the provided API endpoints. Here's an example using cURL:
+
+```bash and python requet examples
+
+# summarizing video
+curl -X GET http://localhost:5000/video_api/your-video-id 
+requests.get("http://localhost:5000/video_api/your-video-id")
+
+# summaring pdf file
+curl -X POST -H "Content-type : application/pdf" -F "files=@yourfile.pdf" http://localhost:5000/file_api/pdf
+requests.post("http://localhost:5000/file_api/pdf", headers = {'Content-Type' : 'application/pdf'}, files = {'file' : open('yourfile.pdf', 'rb')})
+
+# summaring text file
+curl -X POST -H "Content-type : text/plain" -F "files=@yourfile.txt" http://localhost:5000/file_api/txt 
+requests.post("http://localhost:5000/file_api/txt", headers = {'Content-Type' : 'text/plain'}, files = {'file' : open('yourfile.txt', 'rb')})
+
+# summarizing raw text data
+curl -X POST -d '{"text" : your-text-data}' http://localhost:5000/file_api/direct_text
+requests.post("http://localhost:5000/file_api/direct_text, headers = {'Content-Type : 'application/json'}, json = {'text' : your-text-data})
+
+```
+
+Replace `your-video-id` with the actual YouTube video ID you want to summarize.
+Replace `yourfile` with the actual file path of the file you want to summarize.
+Replace `your-text-data` with the actual text string you want to summarize.
+

TranscriptApi/__init__.py

@@ -0,0 +1,21 @@
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy 
+from flask_cors import CORS
+db = SQLAlchemy()
+
+SQLALCHEMY_DATABASE_URI = 'sqlite:///site.db'
+
+def create_app():
+    app = Flask(__name__)
+    CORS(app)
+    app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
+    app.config['UPLOAD_FOLDER'] = 'TranscriptApi/common/files/'
+    db.init_app(app)
+
+    from TranscriptApi.resources.routes import resources
+    app.register_blueprint(resources)
+
+    from TranscriptApi.main.routes import main
+    app.register_blueprint(main)
+
+    return app

TranscriptApi/common/utils.py

@@ -0,0 +1,212 @@
+import openai
+import os
+import librosa
+import soundfile as sf
+from pytube import YouTube
+import urllib.parse as urlparse
+from moviepy.editor import VideoFileClip
+import shutil
+import whisper
+import torch 
+from transformers import pipeline
+from tqdm.auto import tqdm
+from PyPDF2 import PdfReader
+
+
+device = 'cuda' if torch.cuda.is_available() else 'cpu'
+# device = 'cpu'
+
+
+checkpoint = 'Th3BossC/SummarizationModel_t5-small_opeai_tldr'
+
+
+
+
+
+
+############### video queries ###############
+def title(video_id):
+    return YouTube('https://www.youtube.com/watch?v=' + video_id).title
+
+def get_video_id(video_url):
+    url_data = urlparse.urlparse("http://www.youtube.com/watch?v=z_AbfPXTKms&NR=1")
+    query = urlparse.parse_qs(url_data.query)
+    video = query["v"][0]
+    return video
+
+def get_video(video_url, location, filename = 'audio'):
+    if not os.path.exists(location):
+        os.makedirs(location)
+    video_filename = location + filename + '.mp4'
+    audio_filename = location + filename + '.mp3'
+    print('[INFO] downloading video...')
+    video = YouTube(video_url).streams.filter(file_extension = 'mp4').first().download(filename = video_filename)
+    print('something')
+    video = VideoFileClip(video_filename)
+    print('[INFO] extracting audio from video...')
+    video.audio.write_audiofile(audio_filename)
+    #os.remove(video_filename)
+
+    return audio_filename
+
+############################################################
+
+
+############### Audio ###############
+def chunk_audio(filename, segment_length, output_dir):
+    if not os.path.isdir(output_dir):
+        os.mkdir(output_dir)
+    audio, sr = librosa.load(filename, sr = 44100)
+    duration = librosa.get_duration(y = audio, sr = sr)
+    num_segments = int(duration / segment_length) + 1
+    print(f'[INFO] Chunking {num_segments} chunks...')
+
+    audio_files = []
+
+    for i in range(num_segments):
+        start = i*segment_length*sr 
+        end = (i+1)*segment_length*sr
+        segment = audio[start:end]
+        sf.write(os.path.join(output_dir, f"segment_{i}.mp3"), segment, sr)
+        audio_files.append(output_dir + f'segment_{i}.mp3')
+        
+    print(audio_files)
+    #os.remove(filename)
+    return audio_files
+
+def transcribe_audio(audio_files, output_file = None, model = whisper.load_model('base', device = device)):
+    print('[INFO] converting audio to text...')
+    transcripts = []
+    model.to(device)
+    for audio_file in audio_files:
+        response = model.transcribe(audio_file)
+        transcripts.append(response['text'])
+
+    if output_file is not None:
+        with open(output_file, 'w') as f:
+            for transcript in transcripts:
+                f.write(transcript + '\n')
+    
+    return transcripts
+
+############################################################
+
+
+############################################################
+    
+############### Compile all functions ###############
+def summarize_youtube_video(video_url, outputs_dir):
+    print(f'[INFO] running on {device}')
+    raw_audio_dir = f'{outputs_dir}/raw_audio/'
+    chunks_dir = f'{outputs_dir}/chunks/'
+    transcripts_file = f'{outputs_dir}/transcripts.txt'
+    summary_file = f'{outputs_dir}/summary.txt'
+    segment_length = 60*10
+
+    if os.path.exists(outputs_dir):
+        shutil.rmtree(outputs_dir)
+        os.mkdir(outputs_dir)
+
+    audio_filename = get_video(video_url, raw_audio_dir)
+    chunked_audio_files = chunk_audio(audio_filename, segment_length, chunks_dir)
+    transcriptions = transcribe_audio(chunked_audio_files, transcripts_file)
+
+
+    # splitting transcription into sentences    
+    sentences = [] 
+    for transcript in transcriptions:
+        sentences += transcript.split('.')
+
+    sentences_len = [len(sentence) for sentence in sentences]
+    sentence_mean_length = sum(sentences_len) // len(sentences_len)
+
+    num_sentences_per_step = int(1600 / (sentence_mean_length))
+    num_steps = (len(sentences) // num_sentences_per_step) + (len(sentences) % num_sentences_per_step != 0)
+
+    print(f"""
+    [INFO] sentences_len : {len(sentences_len)}
+    [INFO] sentence_mean_length : {sentence_mean_length},
+    [INFO] num_sentences_per_step : {num_sentences_per_step},
+    [INFO] num_steps : {num_steps}
+    """)
+
+    summarizer = pipeline('summarization', model = checkpoint, tokenizer = checkpoint, max_length = 200, truncation = True, device = 0)
+
+    summaries = []
+
+    for i in tqdm(range(num_steps)):
+        chunk = ' '.join(sentences[num_sentences_per_step*i : num_sentences_per_step*(i+1)])
+        summary = summarizer(chunk, do_sample = False)[0]['summary_text']
+        summaries.append(summary)
+
+    complete_summary = ' '.join(summaries)
+    with open(summary_file, 'w') as f:
+        f.write(complete_summary)
+    return complete_summary
+############################################################
+
+
+
+############ File Summarize ############
+
+def extract_text_pdf(file_location = 'TranscriptApi/static/files/temp.pdf'):
+    reader = PdfReader(file_location)
+    text = ""
+    for page in reader.pages:
+        text += page.extract_text()
+    return text;
+
+def extract_text_txt(file_location = 'TranscriptApi/static/files/temp.txt'):
+    with open(file_location, "r") as f:
+        text = f.read()
+    return text
+
+
+
+
+def summarize_string(text : str):
+    sentences = text.split('.')
+
+    summarizer = pipeline('summarization', model = checkpoint, tokenizer = checkpoint, max_length = 200, truncation = True, device = 0)
+
+    sentences_len = [len(sentence) for sentence in sentences]
+    sentence_mean_length = sum(sentences_len) // len(sentences_len)
+
+    num_sentences_per_step = int(1600 / (sentence_mean_length))
+    num_steps = (len(sentences) // num_sentences_per_step) + (len(sentences) % num_sentences_per_step != 0)
+
+    print(f"""
+    [INFO] sentences_len : {len(sentences_len)}
+    [INFO] sentence_mean_length : {sentence_mean_length},
+    [INFO] num_sentences_per_step : {num_sentences_per_step},
+    [INFO] num_steps : {num_steps}
+    """)
+
+
+    summaries = []
+    for i in tqdm(range(num_steps)):
+        chunk = ' '.join(sentences[num_sentences_per_step*i : num_sentences_per_step*(i+1)])
+        summary = summarizer(chunk, do_sample = False)[0]['summary_text']
+        summaries.append(summary)
+
+    complete_summary = ' '.join(summaries)
+    return complete_summary
+
+
+################################################
+
+
+def summarize_file(file_location, file_extension, working_dir = "TranscriptApi/static/files"):
+    # _, file_extension = os.path.splitext(file_location)
+    text = ""
+    if file_extension == '.pdf':
+        text = extract_text_pdf(file_location)
+    elif file_extension == '.txt':
+        text = extract_text_txt(file_location)
+    else:
+        return "[ERROR]"
+    
+    if os.path.exists(working_dir):
+        shutil.rmtree(working_dir)
+    os.mkdir(working_dir)
+    return summarize_string(text)

TranscriptApi/main/routes.py

@@ -0,0 +1,13 @@
+from flask import Blueprint, render_template, url_for
+from TranscriptApi.resources.routes import api
+main = Blueprint('main', __name__)
+
+@main.route('/')
+@main.route('/home')
+def home():
+    return render_template('home.html')
+
+
+@main.route('/online')
+def online():
+    return {"online" : "yes"}, 200

TranscriptApi/models.py

@@ -0,0 +1,22 @@
+from TranscriptApi import db
+from datetime import datetime
+
+class VideoSummary(db.Model):
+    id = db.Column(db.Integer, primary_key = True)
+    date = db.Column(db.DateTime(), nullable = False, default = datetime.utcnow)
+    video_id = db.Column(db.String(10), unique = True, nullable = False)
+    title = db.Column(db.String(100), nullable = False)
+    summary = db.Column(db.Text(), nullable = False) 
+
+    def __repr__(self):
+        print(f'VideoSummary({self.id}, {self.video_id}, {self.title})')
+
+
+class FileSummary(db.Model):
+    id = db.Column(db.Integer, primary_key = True)
+    date = db.Column(db.DateTime(), nullable = False, default = datetime.utcnow)
+    title = db.Column(db.String(100), nullable = False)
+    summary = db.Column(db.Text(), nullable = False)
+
+    def __repr__(self):
+        print(f"FileSummary({self.id}, {self.title})")

TranscriptApi/resources/routes.py

@@ -0,0 +1,62 @@
+from flask import Blueprint, request, current_app
+from flask_restful import Api, Resource
+from TranscriptApi.common.utils import title, summarize_youtube_video, summarize_file, summarize_string
+from TranscriptApi.models import VideoSummary, FileSummary
+from TranscriptApi import db 
+import os
+
+resources = Blueprint('resources', __name__)
+api = Api(resources) 
+
+class VideoTranscript(Resource):
+    def get(self, video_id):
+        print(request)
+        summaryExist = VideoSummary.query.filter_by(video_id = video_id).first() 
+        if summaryExist is not None:
+            return {'title' : summaryExist.title, 'summary' : summaryExist.summary}, 200
+        
+
+        try:
+            video_title = title(video_id)
+        except:
+            return {'error' : 'Video ID not valid'}, 400
+        try:
+            summary = summarize_youtube_video('https://www.youtube.com/watch?v=' + video_id, 'TranscriptApi/common/audio')
+            newVideo = VideoSummary(title = video_title, video_id = video_id, summary = summary)
+            db.session.add(newVideo)
+            db.session.commit()
+            return {'title' : video_title, 'summary' : summary}, 200
+        except Exception as e:
+            return 500
+        
+    
+api.add_resource(VideoTranscript, '/video_api/<string:video_id>')
+
+
+class FileTranscript(Resource):
+    
+    def post(self, type):
+
+
+        if type == 'pdf' or type == 'txt':
+            print(request.files)
+            file = request.files['file']
+            file_location = os.path.join(current_app.config.get('UPLOAD_FOLDER'), file.filename)
+            file.save(os.path.join(current_app.config.get('UPLOAD_FOLDER'), file.filename))
+            summary = summarize_file(file_location = file_location, file_extension = type)
+            file_name = file.filename
+        elif type == 'direct_text':
+            summary = summarize_string(request.json['text'])
+            file_name = "Entered Text"
+        if summary == "[ERROR]":
+            return {'error' : 'We are expreriencing some issues...'}, 500
+        else:
+            newSummary = FileSummary(title = file_name, summary = summary)
+            db.session.add(newSummary)
+            db.session.commit()
+            return {'title' : file_name, 'summary' : summary}, 200
+        print(file)
+
+             
+        
+api.add_resource(FileTranscript, '/file_api/<string:type>')

TranscriptApi/static/app.js

@@ -0,0 +1,118 @@
+function youtube_video_id(url){
+    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+    var match = url.match(regExp);
+    return (match&&match[7].length==11)? match[7] : false;
+}
+
+
+// Theme implementation
+
+const theme = localStorage.getItem('theme');
+const navbar_bg = localStorage.getItem('navbar-bg');
+const navbar_color = localStorage.getItem('navbar-color');
+const button_content = localStorage.getItem('button-content');
+
+
+const themeButton = document.getElementById('theme');
+const body = document.body;
+const nav = document.getElementById('navbar');
+
+body.classList.add(theme || 'light');
+nav.classList.add(navbar_bg || 'bg-light');
+nav.classList.add(navbar_color || 'navbar-light')
+themeButton.innerHTML = button_content || '<i class="bi bi-moon-fill"></i> Toggle Theme';
+
+
+themeButton.onclick = () => {
+    if (body.classList.contains('light')) {
+        body.classList.replace('light', 'dark');
+        nav.classList.replace('bg-light', 'bg-dark');
+        nav.classList.replace('navbar-light', 'navbar-dark'); 
+        themeButton.innerHTML = '<i class="bi bi-brightness-high-fill"></i> Toggle Theme'
+
+        localStorage.setItem('theme', 'dark');
+        localStorage.setItem('navbar-bg', 'bg-dark');
+        localStorage.setItem('navbar-color', 'navbar-dark');
+        localStorage.setItem('button-content', themeButton.innerHTML);
+    }
+    else {
+        body.classList.replace('dark', 'light');
+        nav.classList.replace('bg-dark', 'bg-light');
+        nav.classList.replace('navbar-dark', 'navbar-light');
+        themeButton.innerHTML = '<i class="bi bi-moon-fill"></i> Toggle Theme';
+
+        localStorage.setItem('theme', 'light');
+        localStorage.setItem('navbar-bg', 'bg-light');
+        localStorage.setItem('navbar-color', 'navbar-light');
+        localStorage.setItem('button-content', themeButton.innerHTML);
+    }
+}
+
+// darkButton.onclick = () => {
+//     body.classList.replace('light', 'dark');
+//     nav.classList.replace('bg-light', 'bg-dark');
+//     nav.classList.replace('navbar-light', 'navbar-dark'); 
+//     darkButton.classList.add('active');
+//     darkButton.classList.add('disabled');
+//     lightButton.classList.remove('active');
+//     lightButton.classList.remove('disabled'); 
+// };
+
+// lightButton.onclick = () => {
+//     body.classList.replace('dark', 'light');
+//     nav.classList.replace('bg-dark', 'bg-light');
+//     nav.classList.replace('navbar-dark', 'navbar-light');   
+//     lightButton.classList.add('active');
+//     lightButton.classList.add('disabled');     
+//     darkButton.classList.remove('active');
+//     darkButton.classList.remove('disabled'); 
+// };
+
+
+const main_content = document.getElementById('main-content');
+const video_title = document.getElementById('video-title');
+const video_summary = document.getElementById('video-summary');
+
+const button = document.getElementById('submit-btn');
+const form = document.getElementById('url-form');
+const url = document.getElementById('url')
+
+async function getApiData(video_id) {
+    const response = await fetch('http://localhost:5000/video_api/' + video_id);
+    const jsonData = await response.json();
+
+    console.log(jsonData);
+    video_title.innerHTML = jsonData['title'];
+    return video_summary.innerHTML = jsonData['summary'];
+
+}
+
+
+
+form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    video_url = url.value;  
+    if (video_url == "")
+        return;
+    video_id = youtube_video_id(video_url);
+    video_title.innerHTML = 'Summarizing...';
+    console.log(main_content.classList);
+    //main_content.classList.remove('visually-hidden');
+    main_content.style.clipPath = 'circle(200% at 50% 50%)';
+    video_summary.innerHTML = '<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> \
+    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div> \
+  </div>';
+    if (video_id == false) {
+        video_title.innerHTML = '[Error]';
+        video_summary.innerHTML = 'Invalid video URL';
+        return;
+    }
+    try {
+        getApiData(video_id);
+    }
+    catch {
+        video_title.innerHTML = '[Error]'
+        video_summary.innerHTML = 'Error Video not found';
+    }
+}); 
+

TranscriptApi/static/styles.css

@@ -0,0 +1,125 @@
+.dark {
+    /* --bg : #353941; */
+    --heading-bg : #26282B;
+    --button-bg : #5F85DB;
+    --button-hover-bg : #90B8F8;
+    --text-color : white;
+    --rev-text-color : black;
+
+    --bg : url('images/background-dark.svg');
+}
+
+
+.light {
+    /* --bg : #448EF6; */
+    --heading-bg : #75C2F6;
+    --button-bg : #65DAF7;
+    --button-hover-bg : #FFE981;
+    --text-color : black; 
+    --rev-text-color : white;
+
+    --bg : url('images/background-light.svg');
+}
+
+nav {
+    transition: all 200ms ease-in-out;
+    transition-delay : 0ms;
+}
+
+body {
+    background : var(--bg);
+    background-size: cover;
+    transition: background 200ms ease-in-out, color 1000ms ease-in-out;
+    /* overflow: hidden; */
+}
+
+.grid {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    /* gap: 1rem; */
+    grid-template-columns: minmax(240px, 1fr);
+    grid-template-rows: 240px;
+    margin : 10px;
+    padding : 20px;
+}
+
+
+
+
+.heading {
+    color : var(--text-color);
+    margin : minmax(10px, 100px);
+    padding: 50px;
+    text-align: center;
+    align-self: center;
+    font-family: 'Opens Sans', sans-serif;
+    font-style: italic;
+    font-weight: 800;
+    background-color: var(--heading-bg);
+    border-radius: 8px;
+    filter: drop-shadow(.3rem .3rem 4px black);
+    transition: all 200ms ease-in-out;
+    transition-delay : 200ms;
+}
+
+.url-submit-form {
+    padding : 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+input[type = 'text'] {
+    text-align : center;
+    border: none;
+}
+
+
+input[type = 'text']::placeholder {
+    color: var(--text-color);
+    opacity: 0.4;
+}
+
+.btn-primary {
+    background-color : var(--button-bg) !important;
+    border-color : var(--button-bg) !important;
+    color : var(--text-color) !important;
+}
+
+.btn-primary:hover {
+    background-color: var(--button-hover-bg) !important;
+    border-color : var(--button-hover-bg) !important;
+    color : black !important;
+
+}
+
+
+.text {
+    /* grid-column : span 1 / auto; */
+    color : var(--text-color);
+    padding : 30px;
+    border: 2px solid var(--rev-text-color);
+    border-radius: 8px;
+    backdrop-filter: blur(10px);
+    clip-path: circle(0% at 50% 0%);
+    transition : all 200ms ease-in-out, clip-path 500ms ease-in-out;
+    transition-delay : 400ms;
+}
+
+
+.title {
+    font-family :'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-style : bold;
+    font-size: large;
+    text-align: center;
+}
+
+.content {
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    margin: 5px;
+    padding : 10px;
+    text-align: center;
+}
+

TranscriptApi/templates/home.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+  <link href = "{{url_for('static', filename = 'styles.css')}}" rel = "stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,800&display=swap" rel="stylesheet">
+
+  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+  <script defer src = "{{url_for('static', filename = 'app.js')}}"></script>
+
+  <nav class="navbar navbar-expand-lg sticky-top", id = "navbar">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Video summarizer</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+        <div class="navbar-nav">
+          <button class="nav-link" aria-current="page" href="#" onclick = "location.reload();">Home</button>
+          <a class="nav-link" href="#" id = 'theme' style = 'transition: all 200ms ease-in-out;'>
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</head>
+<body class = ''>
+  <section class = 'grid'>
+    <h1 class = 'animate__animated animate__slideInDown heading'>
+      YouTube Video Summarizer
+    </h1>
+
+    <div class = 'url-submit-form animate__animated animate__slideInUp'>
+      <form class="input-group mb-3" id = "url-form">
+        <input type="text" class="form-control hid" id = 'url' style = "background-color: var(--heading-bg); color : var(--text-color); transition : all 200ms ease; transition-delay : 300ms;" placeholder="Enter URL here">
+      </form>
+      <button class = "btn btn-primary hid" id = 'submit-btn' type = 'submit' form = "url-form">
+        Summarize
+      </button>
+    </div>
+
+
+    <div class = 'text', id = 'main-content'>
+      <div class = 'title'>
+        <strong id = 'video-title'>
+          Text
+        </strong>
+        <hr>
+      </div>
+      <div class = 'content', id = 'video-summary'>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </div>
+    </div>
+  </section>
+
+  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+      <img src="..." class="rounded me-2" alt="...">
+      <strong class="me-auto">Bootstrap</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</body>
+</html>

app.py

@@ -0,0 +1,18 @@
+from TranscriptApi import create_app
+from threading import Thread
+
+app = create_app()
+
+
+if __name__ == '__main__':
+    app.run(debug=True,host="0.0.0.0",port=5000)
+
+
+# def run():
+#     app.run(host = "0.0.0.0", port = 8080)  
+
+# def keep_alive():
+#     t = Thread(target = run)
+#     t.start()
+
+# keep_alive()