Spaces:

BinKhoaLe1812
/

Sall-eGarbageDetection

Running

App Files Files Community

LiamKhoaLe commited on May 14

Commit

57328cd

1 Parent(s): 2e43ca6

Add YOLOv8n to detect animal and 2 Roboflow models to be specifically finetuned on bird and fish. Rm HTML_CONTENT to be rendered on statics dir

Browse files

Files changed (8) hide show

.DS_Store +0 -0
Dockerfile +1 -0
app.py +104 -146
requirements.txt +1 -0
icon.png → statics/icon.png +0 -0
statics/index.html +27 -0
statics/script.js +66 -0
statics/style.css +73 -0

.DS_Store CHANGED Viewed

Binary files a/.DS_Store and b/.DS_Store differ

Dockerfile CHANGED Viewed

@@ -54,6 +54,7 @@ COPY --chown=user . $HOME/app
 RUN python -c "from huggingface_hub import snapshot_download; snapshot_download(repo_id='facebook/detr-resnet-50', local_dir='/home/user/app/model/detr', local_dir_use_symlinks=False)"
 RUN wget -O $HOME/app/model/garbage_detector.pt https://huggingface.co/BinKhoaLe1812/Garbage_Detection/resolve/main/garbage_detector.pt
 RUN wget -O $HOME/app/model/yolov5-detect-trash-classification.pt https://huggingface.co/turhancan97/yolov5-detect-trash-classification/resolve/main/yolov5s.pt
 # Verify model setup
 RUN python setup.py

 RUN python -c "from huggingface_hub import snapshot_download; snapshot_download(repo_id='facebook/detr-resnet-50', local_dir='/home/user/app/model/detr', local_dir_use_symlinks=False)"
 RUN wget -O $HOME/app/model/garbage_detector.pt https://huggingface.co/BinKhoaLe1812/Garbage_Detection/resolve/main/garbage_detector.pt
 RUN wget -O $HOME/app/model/yolov5-detect-trash-classification.pt https://huggingface.co/turhancan97/yolov5-detect-trash-classification/resolve/main/yolov5s.pt
+RUN wget -O /home/user/app/model/yolov8n.pt https://github.com/ultralytics/assets/releases/download/v0.0.0/yolov8n.pt
 # Verify model setup
 RUN python setup.py

app.py CHANGED Viewed

@@ -2,7 +2,7 @@
 # ───────────────────────── app.py (Sall-e demo) ─────────────────────────
 # FastAPI ▸ upload image ▸ multi-model garbage detection ▸ ADE-20K
-# semantic segmentation (Water / Garbage) ▸ A* + KNN navigation ▸ H.264 video
 # =======================================================================
 import os, uuid, threading, shutil, time, heapq, cv2, numpy as np
@@ -12,6 +12,7 @@ from fastapi import FastAPI, File, UploadFile, Request
 from fastapi.responses import HTMLResponse, StreamingResponse, Response
 from fastapi.staticfiles import StaticFiles
 # ── Vision libs ─────────────────────────────────────────────────────────
 import torch, yolov5, ffmpeg
 from ultralytics import YOLO
@@ -19,7 +20,9 @@ from transformers import (
     DetrImageProcessor, DetrForObjectDetection,
     SegformerFeatureExtractor, SegformerForSemanticSegmentation
 )
-from sklearn.neighbors import NearestNeighbors
 # ── Folders / files ─────────────────────────────────────────────────────
 BASE        = "/home/user/app"
@@ -45,6 +48,7 @@ feat_extractor = SegformerFeatureExtractor.from_pretrained(
                     "nvidia/segformer-b4-finetuned-ade-512-512")
 segformer      = SegformerForSemanticSegmentation.from_pretrained(
                     "nvidia/segformer-b4-finetuned-ade-512-512")
 print("✅  Models ready\n")
 # ── ADE-20K palette + custom mapping (verbatim) ─────────────────────────
@@ -163,6 +167,7 @@ def highlight_water_mask_on_frame(frame, binary_mask, color=(255, 0, 0), alpha=0
     cv2.drawContours(overlay, contours, -1, color, thickness=cv2.FILLED)
     return cv2.addWeighted(overlay, alpha, frame, 1 - alpha, 0)
 # ── A* and KNN over binary water grid ─────────────────────────────────
 def astar(start, goal, occ):
     h   = lambda a,b: abs(a[0]-b[0])+abs(a[1]-b[1])
@@ -222,6 +227,7 @@ def knn_path(start, targets, occ):
         todo.remove(list(best))
     return path
 # ── Robot sprite/class -──────────────────────────────────────────────────
 class Robot:
     def __init__(self, sprite, speed=2000): # Declare the robot's physical stats and routing (position, speed, movement, path)
@@ -251,156 +257,29 @@ class Robot:
             break
-# ── FastAPI & HTML content (original styling) ───────────────────────────
-# HTML Content for UI (streamed with FastAPI HTML renderer)
-HTML_CONTENT = """
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Sall-e Garbage Detection</title>
-    <link rel="website icon" type="png" href="/static/icon.png" >
-    <style>
-        body {
-            font-family: 'Roboto', sans-serif; background: linear-gradient(270deg, rgb(44, 13, 58), rgb(13, 58, 56)); color: white; text-align: center; margin: 0; padding: 50px;
-        }
-        h1 {
-            font-size: 40px;
-            background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
-            -webkit-text-fill-color: transparent;
-            -webkit-background-clip: text;
-            font-weight: bold;
-        }
-        #upload-container {
-            background: rgba(255, 255, 255, 0.2); padding: 20px; width: 70%; border-radius: 10px; display: inline-block; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
-        }
-        #upload {
-            font-size: 18px; padding: 10px; border-radius: 5px; border: none; background: #fff; cursor: pointer;
-        }
-        #loader {
-            margin-top: 10px; margin-left: auto; margin-right: auto; width: 60px; height: 60px; font-size: 12px; text-align: center;
-        }
-        p {
-            margin-top: 10px; font-size: 12px; color: #3498db;
-        }
-        #spinner {
-            border: 8px solid #f3f3f3; border-top: 8px solid rgb(117 7 7); border-radius: 50%; animation: spin 1s linear infinite; width: 40px; height: 40px; margin: auto;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        #outputVideo {
-            margin-top: 20px; width: 70%; margin-left: auto; margin-right: auto; max-width: 640px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
-        }
-        #downloadBtn {
-            display: block; visibility: hidden; width: 20%; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 10px 15px; font-size: 16px; background: #27ae60; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none;
-        }
-        #downloadBtn:hover {
-            background: #950606;
-        }
-        .hidden {
-            display: none;
-        }
-        @media (max-width: 860px) {
-            h1 { font-size: 30px; }
-        }
-        @media (max-width: 720px) {
-            h1 { font-size: 25px; }
-            #upload { font-size: 15px; }
-            #downloadBtn { font-size: 13px; }
-        }
-        @media (max-width: 580px) {
-            h1 { font-size: 20px; }
-            #upload { font-size: 10px; }
-            #downloadBtn { font-size: 10px; }
-        }
-        @media (max-width: 580px) {
-            h1 { font-size: 10px; }
-        }
-        @media (max-width: 460px) {
-            #upload { font-size: 7px; }
-        }
-        @media (max-width: 400px) {
-            h1 { font-size: 14px; }
-        }
-        @media (max-width: 370px) {
-            h1 { font-size: 11px; }
-            #upload { font-size: 5px; }
-            #downloadBtn { font-size: 7px; }
-        }
-        @media (max-width: 330px) {
-            h1 { font-size: 8px; }
-            #upload { font-size: 3px; }
-            #downloadBtn { font-size: 5px; }
-        }
-    </style>
-</head>
-<body>
-    <h1>Upload an Image for Garbage Detection</h1>
-    <div id="upload-container">
-        <input type="file" id="upload" accept="image/*">
-    </div>
-    <div id="loader" class="loader hidden">
-        <div id="spinner"></div>
-        <!-- <p>Garbage detection model processing...</p> -->
-    </div>
-    <video id="outputVideo" class="outputVideo" controls></video>
-    <a id="downloadBtn" class="downloadBtn">Download Video</a>
-    <script>
-        document.addEventListener("DOMContentLoaded", function() {
-            document.getElementById("outputVideo").classList.add("hidden");
-            document.getElementById("downloadBtn").style.visibility = "hidden";
-        });
-        document.getElementById('upload').addEventListener('change', async function(event) {
-            event.preventDefault();
-            const loader = document.getElementById("loader");
-            const outputVideo = document.getElementById("outputVideo");
-            const downloadBtn = document.getElementById("downloadBtn");
-            let file = event.target.files[0];
-            if (file) {
-                let formData = new FormData();
-                formData.append("file", file);
-                loader.classList.remove("hidden");
-                outputVideo.classList.add("hidden");
-                document.getElementById("downloadBtn").style.visibility = "hidden";
-                let response = await fetch('/upload/', { method: 'POST', body: formData });
-                let result = await response.json();
-                let user_id = result.user_id;
-                while (true) {
-                    let checkResponse = await fetch(`/check_video/${user_id}`);
-                    let checkResult = await checkResponse.json();
-                    if (checkResult.ready) break;
-                    await new Promise(resolve => setTimeout(resolve, 10000)); // Wait 10s before checking again
-                }
-                loader.classList.add("hidden");
-                let videoUrl = `/video/${user_id}?t=${new Date().getTime()}`;
-                outputVideo.src = videoUrl;
-                outputVideo.load();
-                outputVideo.play();
-                outputVideo.setAttribute("crossOrigin", "anonymous");
-                outputVideo.classList.remove("hidden");
-                downloadBtn.href = videoUrl;
-                document.getElementById("downloadBtn").style.visibility = "visible";
-            }
-        });
-        document.getElementById('outputVideo').addEventListener('error', function() {
-            console.log("⚠️ Video could not be played, showing download button instead.");
-            document.getElementById('outputVideo').classList.add("hidden");
-            document.getElementById("downloadBtn").style.visibility = "visible";
-        });
-    </script>
-</body>
-</html>
-"""
 # ── Static-web ──────────────────────────────────────────────────────────
 app = FastAPI()
-app.mount("/static", StaticFiles(directory=BASE), name="static")
 video_ready={}
 @app.get("/ui", response_class=HTMLResponse)
-def ui(): return HTML_CONTENT
 def _uid(): return uuid.uuid4().hex[:8]
 # ── End-points ──────────────────────────────────────────────────────────
 # User upload environment img here
 @app.post("/upload/")
@@ -421,6 +300,84 @@ def stream(uid:str):
     if not os.path.exists(vid): return Response(status_code=404)
     return StreamingResponse(open(vid,"rb"), media_type="video/mp4")
 # ── Core pipeline (runs in background thread) ───────────────────────────
 def _pipeline(uid,img_path):
     print(f"▶️ [{uid}] processing")
@@ -559,6 +516,7 @@ def _pipeline(uid,img_path):
     os.remove(out_tmp); video_ready[uid]=True
     print(f"✅ [{uid}] video ready → {final}")
 # ── Run locally (HF Space ignores since built with Docker image) ────────
 if __name__=="__main__":
     uvicorn.run(app,host="0.0.0.0",port=7860)

 # ───────────────────────── app.py (Sall-e demo) ─────────────────────────
 # FastAPI ▸ upload image ▸ multi-model garbage detection ▸ ADE-20K
+# semantic segmentation (Water / Garbage) ▸ A* navigation ▸ H.264 video
 # =======================================================================
 import os, uuid, threading, shutil, time, heapq, cv2, numpy as np
 from fastapi.responses import HTMLResponse, StreamingResponse, Response
 from fastapi.staticfiles import StaticFiles
 # ── Vision libs ─────────────────────────────────────────────────────────
 import torch, yolov5, ffmpeg
 from ultralytics import YOLO
     DetrImageProcessor, DetrForObjectDetection,
     SegformerFeatureExtractor, SegformerForSemanticSegmentation
 )
+# from sklearn.neighbors import NearestNeighbors
+from inference_sdk import InferenceHTTPClient
 # ── Folders / files ─────────────────────────────────────────────────────
 BASE        = "/home/user/app"
                     "nvidia/segformer-b4-finetuned-ade-512-512")
 segformer      = SegformerForSemanticSegmentation.from_pretrained(
                     "nvidia/segformer-b4-finetuned-ade-512-512")
+model_animal = YOLO(f"{MODEL_DIR}/yolov8n.pt") # Load COCO pre-trained YOLOv8 for animal detection
 print("✅  Models ready\n")
 # ── ADE-20K palette + custom mapping (verbatim) ─────────────────────────
     cv2.drawContours(overlay, contours, -1, color, thickness=cv2.FILLED)
     return cv2.addWeighted(overlay, alpha, frame, 1 - alpha, 0)
 # ── A* and KNN over binary water grid ─────────────────────────────────
 def astar(start, goal, occ):
     h   = lambda a,b: abs(a[0]-b[0])+abs(a[1]-b[1])
         todo.remove(list(best))
     return path
 # ── Robot sprite/class -──────────────────────────────────────────────────
 class Robot:
     def __init__(self, sprite, speed=2000): # Declare the robot's physical stats and routing (position, speed, movement, path)
             break
 # ── Static-web ──────────────────────────────────────────────────────────
+from fastapi.responses import JSONResponse, FileResponse
+from fastapi.middleware.cors import CORSMiddleware
 app = FastAPI()
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+app.mount("/statics", StaticFiles(directory="statics"), name="statics")
 video_ready={}
 @app.get("/ui", response_class=HTMLResponse)
+async def serve_index():
+    p = "statics/index.html"
+    if os.path.exists(p):
+        print("[STATIC] Serving index.html")
+        return FileResponse(p)
+    print("[STATIC] index.html not found")
+    return JSONResponse(status_code=404, content={"detail":"Not found"})
 def _uid(): return uuid.uuid4().hex[:8]
 # ── End-points ──────────────────────────────────────────────────────────
 # User upload environment img here
 @app.post("/upload/")
     if not os.path.exists(vid): return Response(status_code=404)
     return StreamingResponse(open(vid,"rb"), media_type="video/mp4")
+# ─── Detect animal/wildlife ─────────────────────────────────────────────────
+# Init clients
+# https://universe.roboflow.com/team-hope-mmcyy/hydroquest
+robo_fish = InferenceHTTPClient(
+    api_url="https://detect.roboflow.com",
+    api_key=os.getenv("ROBOFLOW_KEY", "")
+)
+# https://universe.roboflow.com/sky-sd2zq/bird_only-pt0bm/model/1
+robo_bird = InferenceHTTPClient(
+    api_url="https://detect.roboflow.com",
+    api_key=os.getenv("ROBOFLOW_KEY", "")
+)
+# Animal detection endpoint (animal, fish, bird as target classes)
+@app.post("/animal/")
+async def detect_animals(file: UploadFile = File(...)):
+    img_id = _uid()
+    img_path = f"{UPLOAD_DIR}/{img_id}_{file.filename}"
+    with open(img_path, "wb") as f:
+        shutil.copyfileobj(file.file, f)
+    print(f"[Animal] Uploaded image: {img_path}")
+    # Read and prepare detection
+    image = cv2.imread(img_path)
+    detections = []
+    # 1. YOLOv8 local
+    print("[Animal] Detecting via YOLOv8…")
+    try:
+        results = model_animal(image)[0]
+        for box in results.boxes:
+            conf = box.conf[0].item()
+            if conf >= 0.75:
+                cls_id = int(box.cls[0].item())
+                label = model_animal.names[cls_id].lower()
+                if label in ["dog", "cat", "cow", "horse", "elephant", "bear", "zebra", "giraffe", "bird"]:
+                    x1, y1, x2, y2 = map(int, box.xyxy[0].tolist())
+                    detections.append(((x1, y1, x2, y2), "Animal Alert"))
+    except Exception as e:
+        print("[YOLOv8 Error]", e)
+    # 2. Roboflow Fish
+    try:
+        print("[Animal] Detecting via Roboflow Fish model…")
+        fish_preds = robo_fish.infer(img_path, model_id="hydroquest/1")
+        for pred in fish_preds.get("predictions", []):
+            if pred["confidence"] >= 0.75:
+                x1 = int(pred["x"] - pred["width"] / 2)
+                y1 = int(pred["y"] - pred["height"] / 2)
+                x2 = int(pred["x"] + pred["width"] / 2)
+                y2 = int(pred["y"] + pred["height"] / 2)
+                detections.append(((x1, y1, x2, y2), "Fish Alert"))
+    except Exception as e:
+        print("[Roboflow Fish Error]", e)
+    # 3. Roboflow Bird
+    try:
+        print("[Animal] Detecting via Roboflow Bird model…")
+        bird_preds = robo_bird.infer(img_path, model_id="bird_only-pt0bm/1")
+        for pred in bird_preds.get("predictions", []):
+            if pred["confidence"] >= 0.75:
+                x1 = int(pred["x"] - pred["width"] / 2)
+                y1 = int(pred["y"] - pred["height"] / 2)
+                x2 = int(pred["x"] + pred["width"] / 2)
+                y2 = int(pred["y"] + pred["height"] / 2)
+                detections.append(((x1, y1, x2, y2), "Bird Alert"))
+    except Exception as e:
+        print("[Roboflow Bird Error]", e)
+    # Count detection
+    print(f"[Animal] Total detections: {len(detections)}")
+    # Write label
+    for (x1, y1, x2, y2), label in detections:
+        cv2.rectangle(image, (x1, y1), (x2, y2), (0, 0, 255), 2)
+        cv2.putText(image, label, (x1, y1 - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.8, (0, 0, 255), 2)
+    # Write img
+    result_path = f"{OUTPUT_DIR}/{img_id}_animal.jpg"
+    cv2.imwrite(result_path, image)
+    return FileResponse(result_path, media_type="image/jpeg")
 # ── Core pipeline (runs in background thread) ───────────────────────────
 def _pipeline(uid,img_path):
     print(f"▶️ [{uid}] processing")
     os.remove(out_tmp); video_ready[uid]=True
     print(f"✅ [{uid}] video ready → {final}")
 # ── Run locally (HF Space ignores since built with Docker image) ────────
 if __name__=="__main__":
     uvicorn.run(app,host="0.0.0.0",port=7860)

requirements.txt CHANGED Viewed

@@ -15,6 +15,7 @@ yolov5
 huggingface_hub>=0.20.3
 transformers==4.37.2
 accelerate==0.27.2
 # Video Processing
 ffmpeg-python

 huggingface_hub>=0.20.3
 transformers==4.37.2
 accelerate==0.27.2
+inference-sdk
 # Video Processing
 ffmpeg-python

icon.png → statics/icon.png RENAMED Viewed

File without changes

statics/index.html ADDED Viewed

	@@ -0,0 +1,27 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Sall-e Garbage Detection</title>
+    <link rel="website icon" type="png" href="/statics/icon.png" >
+    <link rel="stylesheet" href="/statics/style.css">
+</head>
+<body>
+    <h1>Upload an Image to Simulate Garbage Detection and Robot Navigation</h1>
+    <div id="upload-container">
+        <input type="file" id="upload" accept="image/*">
+    </div>
+    <div id="loader" class="loader hidden">
+        <div id="spinner"></div>
+        <!-- <p>Garbage detection model processing...</p> -->
+    </div>
+    <video id="outputVideo" class="outputVideo" controls></video>
+    <a id="downloadBtn" class="downloadBtn">Download Video</a>
+    <h1>Upload an Image to Simulate Front-view Animal Detection</h1>
+    <div id="upload-container2">
+        <input type="file" id="upload2" accept="image/*">
+        <button onclick="uploadAnimal()">Check Animal</button>
+      </div>
+      <div id="animal-result"></div>
+    <script src="/statics/script.js"></script>
+</body>
+</html>

statics/script.js ADDED Viewed

	@@ -0,0 +1,66 @@

+document.addEventListener("DOMContentLoaded", function() {
+    document.getElementById("outputVideo").classList.add("hidden");
+    document.getElementById("downloadBtn").style.visibility = "hidden";
+});
+document.getElementById('upload').addEventListener('change', async function(event) {
+    event.preventDefault();
+    const loader = document.getElementById("loader");
+    const outputVideo = document.getElementById("outputVideo");
+    const downloadBtn = document.getElementById("downloadBtn");
+    let file = event.target.files[0];
+    if (file) {
+        let formData = new FormData();
+        formData.append("file", file);
+        loader.classList.remove("hidden");
+        outputVideo.classList.add("hidden");
+        document.getElementById("downloadBtn").style.visibility = "hidden";
+        let response = await fetch('/upload/', { method: 'POST', body: formData });
+        let result = await response.json();
+        let user_id = result.user_id;
+        while (true) {
+            let checkResponse = await fetch(`/check_video/${user_id}`);
+            let checkResult = await checkResponse.json();
+            if (checkResult.ready) break;
+            await new Promise(resolve => setTimeout(resolve, 10000)); // Wait 10s before checking again
+        }
+        loader.classList.add("hidden");
+        let videoUrl = `/video/${user_id}?t=${new Date().getTime()}`;
+        outputVideo.src = videoUrl;
+        outputVideo.load();
+        outputVideo.play();
+        outputVideo.setAttribute("crossOrigin", "anonymous");
+        outputVideo.classList.remove("hidden");
+        downloadBtn.href = videoUrl;
+        document.getElementById("downloadBtn").style.visibility = "visible";
+    }
+});
+document.getElementById('outputVideo').addEventListener('error', function() {
+    console.log("⚠️ Video could not be played, showing download button instead.");
+    document.getElementById('outputVideo').classList.add("hidden");
+    document.getElementById("downloadBtn").style.visibility = "visible";
+});
+async function uploadAnimal() {
+    const fileInput = document.getElementById('upload2');
+    if (!fileInput.files.length) return alert("Upload an image first");
+    // Upload and read image file
+    const formData = new FormData();
+    formData.append("file", fileInput.files[0]);
+    // Handshake with FastAPI
+    const res = await fetch("/animal/", {
+      method: "POST",
+      body: formData
+    });
+    // Error
+    if (!res.ok) {
+      alert("Failed to process animal detection.");
+      return;
+    }
+    // Create image
+    const blob = await res.blob();
+    const imgURL = URL.createObjectURL(blob);
+    document.getElementById("animal-result").innerHTML =
+      `<p><b>Animal Detection Result:</b></p><img src="${imgURL}" width="640"/>`;
+  }

statics/style.css ADDED Viewed

	@@ -0,0 +1,73 @@

+body {
+    font-family: 'Roboto', sans-serif; background: linear-gradient(270deg, rgb(44, 13, 58), rgb(13, 58, 56)); color: white; text-align: center; margin: 0; padding: 50px;
+}
+h1 {
+    font-size: 40px;
+    background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    font-weight: bold;
+}
+#upload-container, #upload-container2 {
+    background: rgba(255, 255, 255, 0.2); padding: 20px; width: 70%; border-radius: 10px; display: inline-block; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
+}
+#upload, #upload2 {
+    font-size: 18px; padding: 10px; border-radius: 5px; border: none; background: #fff; cursor: pointer;
+}
+#loader {
+    margin-top: 10px; margin-left: auto; margin-right: auto; width: 60px; height: 60px; font-size: 12px; text-align: center;
+}
+p {
+    margin-top: 10px; font-size: 12px; color: #3498db;
+}
+#spinner {
+    border: 8px solid #f3f3f3; border-top: 8px solid rgb(117 7 7); border-radius: 50%; animation: spin 1s linear infinite; width: 40px; height: 40px; margin: auto;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+#outputVideo {
+    margin-top: 20px; width: 70%; margin-left: auto; margin-right: auto; max-width: 640px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
+}
+#downloadBtn {
+    display: block; visibility: hidden; width: 20%; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 10px 15px; font-size: 16px; background: #27ae60; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none;
+}
+#downloadBtn:hover {
+    background: #950606;
+}
+.hidden {
+    display: none;
+}
+@media (max-width: 860px) {
+    h1 { font-size: 30px; }
+}
+@media (max-width: 720px) {
+    h1 { font-size: 25px; }
+    #upload { font-size: 15px; }
+    #downloadBtn { font-size: 13px; }
+}
+@media (max-width: 580px) {
+    h1 { font-size: 20px; }
+    #upload { font-size: 10px; }
+    #downloadBtn { font-size: 10px; }
+}
+@media (max-width: 580px) {
+    h1 { font-size: 10px; }
+}
+@media (max-width: 460px) {
+    #upload { font-size: 7px; }
+}
+@media (max-width: 400px) {
+    h1 { font-size: 14px; }
+}
+@media (max-width: 370px) {
+    h1 { font-size: 11px; }
+    #upload { font-size: 5px; }
+    #downloadBtn { font-size: 7px; }
+}
+@media (max-width: 330px) {
+    h1 { font-size: 8px; }
+    #upload { font-size: 3px; }
+    #downloadBtn { font-size: 5px; }
+}