base app

.dockerignore

@@ -0,0 +1,11 @@
+__pycache__
+.venv
+.git
+.gitignore
+.python-version
+*.pyc
+*.pyo
+*.pyd
+.DS_Store
+uv.lock
+docs

.flaskenv

@@ -0,0 +1 @@
+FLASK_APP=main.py

.gitignore

@@ -0,0 +1,12 @@
+# Python-generated files
+__pycache__/
+*.py[oc]
+build/
+dist/
+wheels/
+*.egg-info
+
+# Virtual environments
+.venv
+
+uv.lock

.python-version

@@ -0,0 +1 @@
+3.12

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+ENV FLASK_APP=main.py
+ENV FLASK_ENV=production
+ENV PORT=7860
+
+RUN apt-get update && apt-get install -y \
+    libopencv-dev \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["python","-m","gevent.pywsgi","-b","0.0.0.0:7860","main:app"]

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,6 +1,6 @@
 ---
 title: Cut Out
-emoji: 🦀
+emoji: ✂️
 colorFrom: gray
 colorTo: pink
 sdk: docker
@@ -9,4 +9,55 @@ license: apache-2.0
 short_description: An AI image segmentation demo made with Flask and Mobile SAM
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Cut Out
+![Python](https://img.shields.io/badge/python-3.12+-blue.svg)
+
+Cut out is a image segmentation implementation project that allows users to upload an image, select a region of interest and generate a cutout image with the selected region. In this project, I used Meta's [Segment Anything Model](https://github.com/facebookresearch/sam2/tree/main) which is state of the art deep learning model in the image segmentation task. To try the demo visit [here](). To try the Meta's demo try [here](https://segment-anything.com/demo). 
+
+## Demo
+
+https://github.com/user-attachments/assets/98ee0372-a640-419a-8580-1ebf100566ad
+
+
+## Tech Stack
+1. Python
+2. Flask 
+3. Numpy
+4. Pillow
+5. Ultralytics
+6. Torch
+7. Torchvision
+8. Werkzeug
+
+## Installation
+
+### Github
+You can clone this repository by 
+```bash
+$ git clone https://github.com/jaisuryaprabu/cut-out.git
+$ cd cut-out
+```
+### Create the virtual environment
+```bash
+$ python -m venv <your_venv_name>
+$ .venv/Scripts/activate.ps1 <or> source .venv/Scripts/activate
+```
+### Export the FLASK_APP
+Enter this command 
+```bash
+$ export FLASK_APP=main.py
+```
+
+### Run the app
+```bash
+$ python -m gevent.pywsgi -b 0.0.0.0:7860 main:app
+```
+## Contribution
+Contributions are warmly welcomed 🤗 To contribute :
+1. Fork this repository
+2. Make your changes and commit them
+3. Explain about the new feature or improvements
+4. Open a pull request with a description of your changes
+
+## Future Works
+- [ ] Video segmentation

app/__init__.py

@@ -0,0 +1,8 @@
+from flask import Flask
+
+app = Flask(__name__)
+
+# always import the router below the app to avoid circular imports
+from app import logics
+
+# in the flask, the handlers for the application routers are called as view funtions

app/logics.py

@@ -0,0 +1,205 @@
+import os
+import numpy as np
+import cv2
+from ultralytics import SAM
+from ultralytics.utils.downloads import safe_download
+from PIL import Image
+from flask import render_template, request, redirect, url_for, send_from_directory
+from werkzeug.utils import secure_filename
+
+from app import app
+
+# Configurations
+UPLOAD_FOLDER = os.path.join(app.root_path, 'static', 'uploads')
+MODEL_DIR = os.path.join(app.root_path,'models')
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg'}
+
+os.makedirs(UPLOAD_FOLDER,exist_ok=True)
+os.makedirs(MODEL_DIR,exist_ok=True)
+
+MODEL_PATH = os.path.join(MODEL_DIR,'mobile_sam.pt')
+if not os.path.exists(MODEL_PATH):
+    safe_download(url="https://github.com/ultralytics/assets/releases/download/v8.2.0/mobile_sam.pt", dir=MODEL_DIR)
+
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+model = SAM(MODEL_PATH)
+
+# File handling functions
+def clear_uploads_folder():
+    """
+    Clear all files in the uploads folder
+    """
+    if os.path.exists(UPLOAD_FOLDER):
+        for filename in os.listdir(UPLOAD_FOLDER):
+            file_path = os.path.join(UPLOAD_FOLDER, filename)
+            try:
+                if os.path.isfile(file_path) or os.path.islink(file_path):
+                    os.unlink(file_path)
+            except Exception as e:
+                print(f"Error deleting file {file_path}: {e}")
+
+def is_allowed_file(filename):
+    """
+    Checking if a file has an allowed extension
+    """
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def save_file(file, filename):
+    """
+    Save the uploaded file to the uploads folder and return the file path.
+    """
+    file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+    file.save(file_path)
+    return file_path
+
+def generate_preview(x, y, filename):
+    """
+    Generate a preview of the selected region of interest using SAM.
+    Returns the preview image path or None if unsuccessful.
+    """
+    image_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+    image = cv2.imread(image_path)
+    if image is None:
+        return None
+
+    x_int = int(round(x))
+    y_int = int(round(y))
+
+    results = model.predict(source=image_path, points=[x_int, y_int], labels=[1], verbose=False)
+
+    if not results or not results[0].masks or len(results[0].masks) == 0:
+        return None
+
+    try:
+        mask = results[0].masks.data[0].cpu().numpy()
+    except (IndexError, AttributeError):
+        return None
+
+    mask = (mask < 0.5).astype(np.uint8) * 255
+
+    h, w = image.shape[:2]
+    if mask.shape != (h, w):
+        mask = cv2.resize(mask, (w, h), interpolation=cv2.INTER_NEAREST)
+
+    overlay = np.zeros_like(image, dtype=np.uint8)
+    overlay[mask == 255] = (0, 0, 255)  # Red color
+
+    alpha = 0.5
+    preview_image = cv2.addWeighted(image, 1 - alpha, overlay, alpha, 0.0)
+
+    preview_image_path = "preview_" + filename
+    preview_path = os.path.join(app.config['UPLOAD_FOLDER'], preview_image_path)
+    cv2.imwrite(preview_path, preview_image)
+
+    return preview_image_path
+
+def generate_segment(x, y, filename):
+    """
+    Segment the original image for the final result using SAM.
+    Returns the original filename and segmented filename with alpha channel, or (filename, None) if unsuccessful.
+    """
+    image_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+    image = cv2.imread(image_path)
+    image = cv2.cvtColor(image,cv2.COLOR_BGR2RGB)
+    if image is None:
+        return filename, None
+
+    x_int = int(round(x))
+    y_int = int(round(y))
+
+    results = model.predict(source=image_path, points=[x_int, y_int], labels=[1], verbose=False)
+
+    if not results or not results[0].masks or len(results[0].masks) == 0:
+        return filename, None
+
+    try:
+        mask = results[0].masks.data[0].cpu().numpy()
+    except (IndexError, AttributeError):
+        return filename, None
+
+    mask = (mask < 0.5).astype(np.uint8) * 255
+
+    image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+    image_rgba = cv2.cvtColor(image_rgb, cv2.COLOR_RGB2RGBA)
+    image_rgba[:, :, 3] = mask  # Set alpha channel
+
+    segmented_filename = "segmented_" + filename
+    segmented_path = os.path.join(app.config['UPLOAD_FOLDER'], segmented_filename)
+    cv2.imwrite(segmented_path, image_rgba)
+
+    return filename, segmented_filename
+
+# Flask Routes
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    # Clear the uploads folder when showing the upload card
+    if request.method == 'GET':
+        clear_uploads_folder()
+
+    if request.method == 'POST':
+        if 'file' not in request.files:
+            return render_template('main.html', error="No file part")
+        file = request.files['file']
+        if file.filename == '':
+            return render_template('main.html', error="No selected file")
+        if file and is_allowed_file(file.filename):
+            filename = secure_filename(file.filename)
+            save_file(file, filename)
+            return render_template('main.html', uploaded_file=filename)
+    return render_template('main.html')
+
+@app.route('/preview', methods=['POST'])
+def preview():
+    x = request.form.get('x', '')
+    y = request.form.get('y', '')
+    filename = request.form.get('filename', '')
+    if not x or not y or not filename:
+        return render_template('main.html', uploaded_file=filename, error="Please select a region on the image")
+    try:
+        x = float(x)
+        y = float(y)
+    except ValueError:
+        return render_template('main.html', uploaded_file=filename, error="Invalid coordinates")
+    
+    preview_file = generate_preview(x, y, filename)
+    if preview_file is None:
+        return render_template('main.html',uploaded_file=filename,error="There is no object in the selected region")
+
+    return render_template('main.html', uploaded_file=filename, preview_file=preview_file, x_coord=x, y_coord=y)
+
+@app.route('/segment', methods=['POST'])
+def segment():
+    x = request.form.get('x', '')
+    y = request.form.get('y', '')
+    filename = request.form.get('filename', '')
+
+    if not x or not y or not filename:
+        return render_template('main.html', uploaded_file=filename, error="Please select a region on the image")
+
+    try:
+        x = float(x)
+        y = float(y)
+    except ValueError:
+        return render_template('main.html', uploaded_file=filename, error="Invalid coordinates")
+
+    uploaded_file, result_file = generate_segment(x, y, filename)
+    
+    return render_template('main.html', uploaded_file=uploaded_file, result_file=result_file)
+
+@app.route('/reset', methods=['GET'])
+def reset():
+    # Clear the uploads folder before returning to the upload phase
+    clear_uploads_folder()
+    return redirect(url_for('index'))
+
+@app.route('/static/uploads/<filename>')
+def uploaded_file(filename):
+    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
+
+@app.route('/download/<filename>')
+def download_file(filename):
+    return send_from_directory(app.config['UPLOAD_FOLDER'], filename, as_attachment=True)
+
+@app.route('/about')
+def about_page():
+    return render_template('about.html')

app/models/mobile_sam.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6dbb90523a35330fedd7f1d3dfc66f995213d81b29a5ca8108dbcdd4e37d6c2f
+size 40728226

app/static/styles.css

@@ -0,0 +1,247 @@
+/* 🌙 Dark Theme Base Styles */
+:root {
+    --bg-dark: #121212;
+    --bg-light: #1e1e1e;
+    --text-light: #ffffff;
+    --text-muted: #b0b0b0;
+    --primary-color:  #F1F1F2;
+    --secondary-color: #A1D6E2;
+    --error-color : red;
+    --border-color: #333;
+    --hover-color: #A1D6E2;
+}
+
+/* 🌐 Global Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-light);
+    line-height: 1.6;
+}
+
+a {
+    color: var(--text-muted);
+    text-decoration: none;
+    margin: 0 10px;
+    transition: color 0.3s;
+}
+
+a:hover {
+    color: var(--primary-color);
+}
+
+/* 🔝 Navigation Bar */
+.navbar {
+    background: var(--bg-light);
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 2px solid var(--border-color);
+}
+
+.navbar h1 {
+    color: var(--text-light);
+    font-size: 1.8rem;
+}
+
+.navbar ul {
+    list-style: none;
+    display: flex;
+    gap: 1rem;
+}
+
+.navbar ul li {
+    display: inline;
+}
+
+.navbar ul li a {
+    text-decoration: none;
+    color: var(--text-muted);
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    transition: color 0.3s;
+}
+
+.navbar ul li a:hover {
+    color: var(--primary-color);
+}
+
+/* 📌 Card Component */
+/* Card Transition Animation */
+.card {
+    background: var(--bg-light);
+    padding: 2rem;
+    margin: 5rem auto;
+    max-width: 400px;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--border-color);
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeIn 0.5s ease forwards;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.card h2 {
+    color: var(--text-light);
+    margin-bottom: 1rem;
+}
+
+.card p {
+    color: var(--text-muted);
+    margin-bottom: 1rem;
+}
+
+.card .upload-btn {
+    display: block;
+    width: 100%;
+    background: var(--secondary-color);
+    border: none;
+    color: var(--bg-dark);
+    padding: 10px;
+    font-size: 1rem;
+    font-weight: bold;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background 0.3s;
+    text-decoration: none;
+}
+
+.card .upload-btn:hover {
+    background: var(--primary-color);
+}
+.card .a {
+    color: var(--text-muted);
+    text-decoration: none;
+    margin: 0 10px;
+    transition: color 0.3s;
+}
+.card .a:hover {
+    color: var(--primary-color);
+}
+
+/* 🔘 Buttons */
+.btn {
+    display: inline-block;
+    padding: 12px 20px;
+    font-size: 1rem;
+    font-weight: bold;
+    border-radius: 5px;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+    transition: background 0.3s, transform 0.2s;
+    text-decoration: none;
+}
+
+.btn-primary {
+    background: var(--primary-color);
+    color: var(--bg-dark);
+}
+
+.btn-primary:hover {
+    background: var(--hover-color);
+}
+
+.btn-secondary {
+    background: var(--secondary-color);
+    color: var(--bg-dark);
+    margin-left: 10px;
+}
+
+.btn-secondary:hover {
+    background: var(--primary-color);
+}
+
+.btn:active {
+    transform: scale(0.95);
+}
+
+/* 📏 Separator Line */
+.separator {
+    height: 2px;
+    background: var(--border-color);
+    margin: 2rem 0;
+}
+
+/* 📌 Footer */
+.footer {
+    background: var(--bg-light);
+    padding: 1rem;
+    text-align: center;
+    border-top: 2px solid var(--border-color);
+    margin: 5rem auto;
+}
+
+.footer h2 {
+    color: var(--text-light);
+    text-align: left;
+}
+.footer p {
+    color: var(--text-light);
+    text-align: left;
+}
+.footer ul li {
+    display: inline;
+    margin : 5px 5px;
+}
+
+.footer ul li a {
+    text-decoration: none;
+    color: var(--text-muted);
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    transition: color 0.3s;
+}
+
+.footer ul li a:hover {
+    color: var(--primary-color);
+}
+
+/* Error Message */
+.error {
+    color: var(--error-color);
+    font-size: 1rem;
+    margin-top: 10px;
+}
+
+/* Upload Input Styling */
+input[type="file"] {
+    display: block;
+    margin: 10px auto;
+    padding: 10px;
+    background: var(--bg-light);
+    border: 1px solid var(--border-color);
+    color: var(--text-light);
+    cursor: pointer;
+}
+
+/* Preview Image Styling */
+.preview-image {
+    width: 100%;
+    max-width: 300px;
+    height: auto;
+    display: block;
+    margin: 20px auto;
+    border-radius: 10px;
+    border: 2px solid var(--border-color);
+    transition: border-color 0.3s;
+}
+
+.preview-image.preview-active {
+    border-color: var(--secondary-color);
+}

app/templates/about.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title> About | Cut Out ✂️</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Cut Out | Image segmentation</title>
+        <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    </head>
+    <body>
+        {% include 'navbar.html' %}
+        <div class="card">
+            <h1>About</h1>
+            <p>This project is developed by <a href="https://x.com/__Jaisurya"">Jaisurya Prabakaran</a> using the flask in python. The inspiration of this project is from the demo of <a href="https://segment-anything.com">Segment Anything Model</a> by Meta. The model used in this project is <a href="https://github.com/facebookresearch/sam2/tree/main">SAM 2 Tiny</a> version</p>
+        </div>
+        {% include 'footer.html' %}
+    </body>
+</html>

app/templates/base.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cut Out | Image segmentation</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+     {% include 'navbar.html' %}
+    <div>
+        {% block content %}{% endblock %}
+    </div>
+    {%include 'footer.html' %}
+</body>
+</html>

app/templates/footer.html

@@ -0,0 +1,8 @@
+<footer class="footer">
+    <h2>Links 🔗</h2>
+    <ul>
+        <li><a href="https://x.com/__Jaisurya"> X</a></li>
+        <li><a href="https://www.linkedin.com/in/jaisurya-prabakaran-3619aa226/">Linked In</a></li>
+        <li><a href="https://github.com/JaiSuryaPrabu/cut-out">Code</a></li>
+    </ul>
+</footer>

app/templates/main.html

@@ -0,0 +1,75 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <!-- Upload card -->
+    {% if not uploaded_file %}
+    <div class="card">
+        <h2>Upload Your File</h2>
+        <p>Click the button below to select and upload your file. Ensure png, jpg, jpeg files are selected</p>
+        <form action="/" method="POST" enctype="multipart/form-data">
+            <input type="file" name="file" id="file-input" accept=".jpg, .jpeg, .png">
+            <button type="submit" class="upload-btn">Upload Photo</button>
+        </form>
+        {% if error %}
+            <p class="error">{{ error }}</p>
+        {% endif %}
+    </div>
+    {% endif %}
+
+    <!-- Selection card -->
+    {% if uploaded_file and not result_file %}
+    <div class="card">
+        <h2>Select the Object</h2>
+        <p>Click on the region of interest to make a cutout</p>
+        <img src="{{ url_for('static', filename='uploads/' + (preview_file if preview_file else uploaded_file)) }}" alt="Uploaded Image" class="preview-image{% if preview_file %} preview-active{% endif %}" id="preview-image">
+        <form id="preview-form" action="/preview" method="POST" style="display: none;">
+            <input type="hidden" name="x" id="preview-x-coord">
+            <input type="hidden" name="y" id="preview-y-coord">
+            <input type="hidden" name="filename" value="{{ uploaded_file }}">
+        </form>
+        <form id="segment-form" action="/segment" method="POST">
+            <!-- Pre-fill x and y coordinates if available -->
+            <input type="hidden" name="x" id="x-coord" value="{{ x_coord if x_coord is not none else '' }}">
+            <input type="hidden" name="y" id="y-coord" value="{{ y_coord if y_coord is not none else '' }}">
+            <input type="hidden" name="filename" value="{{ uploaded_file }}">
+            <button type="submit" class="btn btn-primary" id="submit-btn" {% if not preview_file %}disabled{% endif %}>Submit</button>
+        </form>
+        <a href="{{ url_for('reset') }}" class="btn btn-secondary" style="margin-top: 10px;">Back</a>
+        {% if error %}
+            <p class="error">{{ error }}</p>
+        {% endif %}
+    </div>
+    {% endif %}
+
+    <!-- Result card -->
+    {% if result_file %}
+    <div class="card">
+        <h2>Result Image</h2>
+        <p>The selected region has been removed from the original image.</p>
+        <img src="{{ url_for('static', filename='uploads/' + result_file) }}" alt="Result Image" class="preview-image">
+        <a href="{{ url_for('download_file', filename=result_file) }}" class="btn btn-primary" style="margin-top: 10px;">Download Result</a>
+        <a href="{{ url_for('reset') }}" class="btn btn-secondary" style="margin-top: 10px;">Back</a>
+    </div>
+    {% endif %}
+
+    <script>
+        document.getElementById('preview-image')?.addEventListener('click', function(e) {
+            // Get the image element
+            const img = e.target;
+            const rect = img.getBoundingClientRect();
+
+            // Calculate the x, y coordinates relative to the image
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+
+            // Update hidden inputs with coordinates
+            document.getElementById('preview-x-coord').value = x;
+            document.getElementById('preview-y-coord').value = y;
+            document.getElementById('x-coord').value = x;
+            document.getElementById('y-coord').value = y;
+
+            document.getElementById('submit-btn').disabled = false;
+            document.getElementById('preview-form').submit();
+        });
+    </script>
+{% endblock %}

app/templates/navbar.html

@@ -0,0 +1,6 @@
+<nav class="navbar">
+    <h1><a href="/">Cut Out ✂️</a></h1>
+    <ul>
+        <li><a href="/about">About</a></li>
+    </ul>
+</nav>

docs/Problems.md

@@ -0,0 +1,4 @@
+# Deployment Problems
+## Docker
+* I created the `dockerfile` for the python:3.12 base image with installing the dependencies using pip which leads to error of building the `sam2` package because it has `pyproject.yaml` based configurations
+* Then updated the `dockerfile` to copy my virtual environment to the docker, the build is success but the runtime fails because the image is `debian` based, my OS is windows

docs/Progress.md

@@ -0,0 +1,28 @@
+# Progress 
+
+## Setup and organizing
+1. Initialize the `uv` with `uv init` command
+2. Install the flask by `uv pip install flask` command
+3. Created the `app` directory
+4. Created the `app/__init__.py` for adding the backend code inside the `app` directory
+5. Created the `app/routes.py` for adding the view functions
+6. Exported the `FLASK_APP=main.py` to the environment
+7. Tested the execution of the flask app by `flask run` command
+8. Installed the python dot env for saving the environment variables, helpful for using environment variable and to install use `uv pip install python-dotenv` 
+9. Created the `.flaskenv` for storing the environmental variables for this application
+10. Created a directory named `app/templates`
+11. Inside the `app/templates/` directory, created the `index.html` 
+12. By using the `render_template()` function the `html` code is rendered in the webpage.
+13. Can able to add `title` arg in the `render_template()` as it is optional and `html` contains the `{% if title %}` and `{% else %}` and `{% endif %}` for conditional rendering.
+14. Created a base template in `base.html` that acts as `layout.jsx` in react based applications.
+15. Updated the `app/templates/index.html` with the block named `content`
+16. To make the active reload of the flask app, run with `flask run --debug` command
+17. Created `app/static` folder for storing the `css` files
+18. Splitted the `base.html` into multiple files like `main.html`, `navbar.html` and `footer.html`
+
+## Backend logic implementation
+1. Added the file upload logic to the `routes.py` and updated the `main.html` for previewing the file
+2. Added the cards in the main html file for uploading the image, previewing the image and getting the result image.
+3. Downloaded the SAM 2 model from the sam2 github repository
+4. Inference code is added to get the final result
+5. For better user experience overlay image is added in the `preview_image()` function

main.py

@@ -0,0 +1,6 @@
+from gevent.pywsgi import WSGIServer
+from app import app
+
+if __name__ == '__main__':
+    http_server = WSGIServer(('0.0.0.0', 7860), app)
+    http_server.serve_forever()

pyproject.toml

@@ -0,0 +1,8 @@
+[project]
+name = "cut-out"
+version = "0.1.0"
+description = "Image segmentation project"
+readme = "README.md"
+requires-python = ">=3.12"
+dependencies = [
+]

requirements.txt

@@ -0,0 +1,7 @@
+flask
+numpy
+pillow
+python-dotenv
+ultralytics
+werkzeug
+gevent