gradio updates initial

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,160 +0,0 @@
-# Byte-compiled / optimized / DLL files
-__pycache__/
-*.py[cod]
-*$py.class
-
-# C extensions
-*.so
-
-# Distribution / packaging
-.Python
-build/
-develop-eggs/
-dist/
-downloads/
-eggs/
-.eggs/
-lib/
-lib64/
-parts/
-sdist/
-var/
-wheels/
-share/python-wheels/
-*.egg-info/
-.installed.cfg
-*.egg
-MANIFEST
-
-# PyInstaller
-#  Usually these files are written by a python script from a template
-#  before PyInstaller builds the exe, so as to inject date/other infos into it.
-*.manifest
-*.spec
-
-# Installer logs
-pip-log.txt
-pip-delete-this-directory.txt
-
-# Unit test / coverage reports
-htmlcov/
-.tox/
-.nox/
-.coverage
-.coverage.*
-.cache
-nosetests.xml
-coverage.xml
-*.cover
-*.py,cover
-.hypothesis/
-.pytest_cache/
-cover/
-
-# Translations
-*.mo
-*.pot
-
-# Django stuff:
-*.log
-local_settings.py
-db.sqlite3
-db.sqlite3-journal
-
-# Flask stuff:
-instance/
-.webassets-cache
-
-# Scrapy stuff:
-.scrapy
-
-# Sphinx documentation
-docs/_build/
-
-# PyBuilder
-.pybuilder/
-target/
-
-# Jupyter Notebook
-.ipynb_checkpoints
-
-# IPython
-profile_default/
-ipython_config.py
-
-# pyenv
-#   For a library or package, you might want to ignore these files since the code is
-#   intended to run in multiple environments; otherwise, check them in:
-# .python-version
-
-# pipenv
-#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
-#   However, in case of collaboration, if having platform-specific dependencies or dependencies
-#   having no cross-platform support, pipenv may install dependencies that don't work, or not
-#   install all needed dependencies.
-#Pipfile.lock
-
-# poetry
-#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
-#   This is especially recommended for binary packages to ensure reproducibility, and is more
-#   commonly ignored for libraries.
-#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
-#poetry.lock
-
-# pdm
-#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
-#pdm.lock
-#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
-#   in version control.
-#   https://pdm.fming.dev/#use-with-ide
-.pdm.toml
-
-# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
-__pypackages__/
-
-# Celery stuff
-celerybeat-schedule
-celerybeat.pid
-
-# SageMath parsed files
-*.sage.py
-
-# Environments
-.env
-.venv
-env/
-venv/
-ENV/
-env.bak/
-venv.bak/
-
-# Spyder project settings
-.spyderproject
-.spyproject
-
-# Rope project settings
-.ropeproject
-
-# mkdocs documentation
-/site
-
-# mypy
-.mypy_cache/
-.dmypy.json
-dmypy.json
-
-# Pyre type checker
-.pyre/
-
-# pytype static type analyzer
-.pytype/
-
-# Cython debug symbols
-cython_debug/
-
-# PyCharm
-#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
-#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
-#  and can be added to the global gitignore or merged into this file.  For a more nuclear
-#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
-#.idea/

gradio-interface.py

@@ -1,12 +0,0 @@
-import gradio as gr
-import subprocess
-
-def launch_flask():
-    # Run the Flask app in a subprocess
-    subprocess.Popen(["python", "app.py"])
-
-# Create a Gradio interface that launches the Flask app
-iface = gr.Interface(fn=launch_flask, inputs=[], outputs=[])
-
-if __name__ == "__main__":
-    iface.launch()

app.py → gradio_app.py

@@ -1,8 +1,6 @@
-from flask import Flask, render_template, request, jsonify
+import gradio as gr
 import psycopg2
 
-app = Flask(__name__)
-
 def connect_to_db():
     return psycopg2.connect(
         dbname="glprui_jloddr",
@@ -13,14 +11,7 @@ def connect_to_db():
         sslmode="prefer"
     )
 
-@app.route('/')
-def index():
-    return render_template('index.html')
-
-@app.route('/record_data', methods=['POST'])
-def record_data():
-    data = request.json
-
+def submit_data(age, gender, transport, multi_transport, time_of_day, day_of_week, description, start_point, lost_point, end_point):
     conn = connect_to_db()
     cursor = conn.cursor()
 
@@ -30,32 +21,56 @@ def record_data():
             INSERT INTO public.gettinglost_tracking (Age, Gender, Transport, TimeOfDay, DayOfWeek, Description) 
             VALUES (%s, %s, %s, %s, %s, %s) RETURNING ID;
             """,
-            (data['age'], data['gender'], data['transport'], data['timeOfDay'], data['dayOfWeek'], data['description'])
+            (age, gender, transport, time_of_day, day_of_week, description)
         )
 
         record_id = cursor.fetchone()[0]
 
-        point_data = data['points']
-        for pointType, point in point_data.items():
+        points = {'start': start_point, 'lost': lost_point, 'end': end_point}
+        for pointType, point in points.items():
             if point:
                 cursor.execute(
                     """
                     INSERT INTO public.gettinglost_geom (ID, PointType, geom) 
                     VALUES (%s, %s, ST_SetSRID(ST_Point(%s, %s), 4326));
                     """,
-                    (record_id, pointType, point['lng'], point['lat'])
+                    (record_id, pointType, point[1], point[0])
                 )
 
         conn.commit()
-        return jsonify({"message": "Data recorded successfully!"})
-
+        return "Data recorded successfully!"
     except Exception as e:
         conn.rollback()
-        return jsonify({"error": str(e)})
-
+        return f"Error: {str(e)}"
     finally:
         cursor.close()
         conn.close()
 
-if __name__ == '__main__':
-    app.run(debug=True)
+age = gr.Dropdown(choices=["0-10", "11-20", "21-30", "31-40", "41-50", "51-60", "61-70", "71-80", "81-90", "91-100"], label="Age")
+gender = gr.Radio(choices=["M", "F", "O", "PNTS"], label="Gender")
+transport = gr.Radio(choices=["Walk", "Car", "Bike", "Train", "Other", "Multi"], label="Mode of Transport")
+multi_transport = gr.CheckboxGroup(choices=["Walk", "Car", "Bike", "Train", "Other"], label="If Multi, Select Modes Used", visible=False)
+time_of_day = gr.Dropdown(choices=["Morning", "Afternoon", "Evening", "Night"], label="Time of Day")
+day_of_week = gr.Dropdown(choices=["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], label="Day of the Week")
+description = gr.Textbox(lines=4, placeholder="Why did you get lost?", label="Description")
+start_point = gr.Map(label="Select Start Point")
+lost_point = gr.Map(label="Select Getting Lost Point")
+end_point = gr.Map(label="Select End Point")
+
+def update_visibility(transport_mode):
+    if transport_mode == "Multi":
+        return gr.update(visible=True)
+    else:
+        return gr.update(visible=False)
+
+transport.change(fn=update_visibility, inputs=transport, outputs=multi_transport)
+
+iface = gr.Interface(
+    fn=submit_data, 
+    inputs=[age, gender, transport, multi_transport, time_of_day, day_of_week, description, start_point, lost_point, end_point], 
+    outputs="text",
+    live=True
+)
+
+if __name__ == "__main__":
+    iface.launch()

templates/index.html

@@ -1,275 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>Geographical Interface</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
-    <style>
-        #map {
-            width: 100%;
-            height: 100vh;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-
-        #data-entry-panel {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            width: 300px;
-            background-color: #f8f8f8;
-            padding: 15px;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            z-index: 1000;
-        }
-
-        #data-entry-panel label,
-        #data-entry-panel select,
-        #data-entry-panel textarea {
-            display: block;
-            margin-bottom: 10px;
-            width: 100%;
-        }
-
-        #data-entry-form button {
-            display: block;
-            margin: 0 auto;
-            padding: 10px 20px;
-            background-color: orange;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 16px;
-        }
-
-        #data-entry-form button:hover {
-            background-color: darkorange;
-        }
-
-        /* Additional styles for multi-mode transport options */
-        #multi-mode-options {
-            display: none;
-            margin-top: 10px;
-            margin-bottom: 10px;
-        }
-
-        /* Point Type Selector styles */
-        #point-selector {
-            position: absolute;
-            top: 10px;
-            left: 75px;
-            background-color: #f8f8f8;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            z-index: 1000;
-            font-size: 16px;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="map"></div>
-
-    <!-- Point Type Selector on the Left -->
-    <div id="point-selector">
-        <p>Select Point Type:</p>
-        <label style="display: inline-block; margin-right: 10px;">
-            <input type="radio" name="pointType" value="start" checked> 
-            <span style="color: red;">●</span> Start Point
-        </label>
-        <label style="display: inline-block; margin-right: 10px;">
-            <input type="radio" name="pointType" value="lost"> 
-            <span style="color: yellow;">●</span> Getting Lost Point
-        </label>
-        <label style="display: inline-block;">
-            <input type="radio" name="pointType" value="end"> 
-            <span style="color: blue;">●</span> End Point
-        </label>
-    </div>
-
-    <!-- Side Panel -->
-    <div id="data-entry-panel">
-        <h3>Enter Data</h3>
-        <form id="data-entry-form">
-            <label for="age">Age:</label>
-            <select id="age">
-                <option value="0-10">0-10</option>
-                <option value="11-20">11-20</option>
-                <option value="21-30">21-30</option>
-                <option value="31-40">31-40</option>
-                <option value="41-50">41-50</option>
-                <option value="51-60">51-60</option>
-                <option value="61+">61+</option>
-            </select>
-
-            <label for="gender">Gender:</label>
-            <select id="gender">
-                <option value="F">Female</option>
-                <option value="M">Male</option>
-                <option value="O">Other</option>
-                <option value="PNTS">Prefer Not To Say</option>
-            </select>
-
-            <label for="transport">Mode of Transport:</label>
-            <select id="transport" onchange="checkTransportMode()">
-                <option value="Walk">Walk</option>
-                <option value="Car">Car</option>
-                <option value="Bike">Bike</option>
-                <option value="Train">Train</option>
-                <option value="Subway">Subway</option>
-                <option value="Other">Other</option>
-                <option value="Multi">Multi</option>
-            </select>
-
-            <div id="multi-mode-options">
-                <p>Select modes used:</p>
-                <input type="checkbox" id="walk" name="mode" value="Walk">
-                <label for="walk">Walk</label><br>
-                <input type="checkbox" id="Train" name="mode" value="Train">
-                <label for="walk">Train</label><br>
-                <input type="checkbox" id="Bike" name="mode" value="Bike">
-                <label for="Bike">Bike</label><br>
-                <input type="checkbox" id="Subway" name="mode" value="Subway">
-                <label for="Subway">Subway</label><br>
-            </div>
-
-            <label for="timeOfDay">Time Of Day:</label>
-            <select id="timeOfDay">
-                <option value="Morning">Morning</option>
-                <option value="Afternoon">Afternoon</option>
-                <option value="Evening">Evening</option>
-                <option value="Night">Night</option>
-            </select>
-
-            <label for="dayOfWeek">Date (Day of the week):</label>
-            <select id="dayOfWeek">
-                <option value="Monday">Monday</option>
-                <option value="Tuesday">Tuesday</option>
-                <option value="Wednesday">Wednesday</option>
-                <option value="Thursday">Thursday</option>
-                <option value="Friday">Friday</option>
-                <option value="Saturday">Saturday</option>
-                <option value="Sunday">Sunday</option>
-            </select>
-
-            <label for="description">Why did you get lost?</label>
-            <textarea id="description" rows="4"></textarea>
-
-            <button type="button" onclick="submitData()">Save</button>
-            <hr style="margin-top: 15px;">
-
-            <p>For a more detailed survey, click the link or scan the QR code:</p>
-            <a href="https://arcg.is/1GK5jP0" target="_blank">https://arcg.is/1GK5jP0</a>
-            <br>
-            <img src="/static/Getting Lost Survey.png" alt="QR Code for Survey" style="margin-top: 10px; width: 50%;">
-        </div>
-        </form>
-    </div>
-
-    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
-    <script>
-        var openStreetMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '© OpenStreetMap contributors'
-        });
-
-        var openTopoMapLayer = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
-            attribution: '© OpenTopoMap contributors'
-        });
-
-        var map = L.map('map', {
-            center: [51.505, -0.09],
-            zoom: 13,
-            layers: [openStreetMapLayer]
-        });
-
-        var baseMaps = {
-            "OpenStreetMap": openStreetMapLayer,
-            "OpenTopoMap": openTopoMapLayer
-        };
-
-        L.control.layers(baseMaps, null, { position: 'topleft' }).addTo(map);
-
-        var clickedLat = null;
-        var clickedLon = null;
-
-        map.on('click', function (e) {
-            clickedLat = e.latlng.lat;
-            clickedLon = e.latlng.lng;
-
-            var pointType = document.querySelector('input[name="pointType"]:checked').value;
-            var color;
-
-            switch (pointType) {
-                case 'start':
-                    color = 'red';
-                    break;
-                case 'lost':
-                    color = 'yellow';
-                    break;
-                case 'end':
-                    color = 'blue';
-                    break;
-            }
-
-            L.circleMarker([clickedLat, clickedLon], {
-                color: color,
-                radius: 5
-            }).addTo(map);
-        });
-
-        function checkTransportMode() {
-            var transport = document.getElementById('transport').value;
-            var multiOptions = document.getElementById('multi-mode-options');
-            if (transport === 'Multi') {
-                multiOptions.style.display = 'block';
-            } else {
-                multiOptions.style.display = 'none';
-            }
-        }
-
-        function submitData() {
-            var age = document.getElementById('age').value;
-            var gender = document.getElementById('gender').value;
-            var transport = document.getElementById('transport').value;
-            var timeOfDay = document.getElementById('timeOfDay').value;
-            var dayOfWeek = document.getElementById('dayOfWeek').value;
-            var description = document.getElementById('description').value;
-            var pointType = document.getElementById('pointType').value;
-
-            fetch('/record_data', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    age: age,
-                    gender: gender,
-                    transport: transport,
-                    timeOfDay: timeOfDay,
-                    dayOfWeek: dayOfWeek,
-                    description: description,
-                    lat: clickedLat,
-                    lon: clickedLon,
-                    pointType: pointType
-                })
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        alert('Failed to record data: ' + data.error);
-                    } else {
-                        alert(data.message);
-                    }
-                });
-        }
-
-    </script>
-</body>
-
-</html>