diff --git a/api/api/views.py b/api/api/views.py index 6c0cf6f..c9ea3c0 100644 --- a/api/api/views.py +++ b/api/api/views.py @@ -21,7 +21,12 @@ UPLOAD_DIR = "/tmp/freqsplit" # Ensure the temp directory exists os.makedirs(UPLOAD_DIR, exist_ok=True) -# +# Endpoint to ping server +@api_view(['GET']) +def ping(request): + """Endpoint to ping the server""" + if (request): + return Response(status=status.HTTP_200_OK); # Endpoint to upload audio and classify it to audio_class @api_view(['POST']) diff --git a/api/backend/urls.py b/api/backend/urls.py index a675ee7..b5af9fe 100644 --- a/api/backend/urls.py +++ b/api/backend/urls.py @@ -16,6 +16,7 @@ Including another URLconf """ from django.contrib import admin from django.urls import path +from api.views import ping from api.views import upload_audio from api.views import normalize_audio from api.views import trim_audio @@ -28,6 +29,7 @@ from api.views import cleanup from api.views import cleanup_zip urlpatterns = [ + path('api/ping', ping, name="ping"), path('admin/', admin.site.urls), path('api/upload', upload_audio, name='upload_audio'), path('api/normalize', normalize_audio, name="normalize_audio"), diff --git a/client/src/Pages/UploadPage.tsx b/client/src/Pages/UploadPage.tsx index b8781df..ed40adc 100644 --- a/client/src/Pages/UploadPage.tsx +++ b/client/src/Pages/UploadPage.tsx @@ -27,18 +27,34 @@ function UploadPage() { const [isDragging, setIsDragging] = useState(false); const [fileError, setFileError] = useState(""); const [upload, setUpload] = useState(false); + const [inputEnabled, setInputEnabled] = useState(false); useEffect(() => { - setTimeout(() => { + const startLogs = async () => { setLogs([formatLogMessage("Initializing freqsplit")]); + setTimeout(() => { setLogs((prevLogs) => [...prevLogs, formatLogMessage("Connecting to server")]); - setTimeout(() => { - setLogs((prevLogs) => [...prevLogs, formatLogMessage("Connection established successfully")]); - },80) + + // Send GET request to /api/ping + axios.get("/api/ping") + .then((ping_resp) => { + if (ping_resp.status === 200) { + setTimeout(() => { + setLogs((prevLogs) => [...prevLogs, formatLogMessage("Connection established successfully")]); + setInputEnabled(true); + }, 80); + } else { + setLogs((prevLogs) => [...prevLogs, formatLogMessage("Failed to connect to server")]); + } + }) + .catch(() => { + setLogs((prevLogs) => [...prevLogs, formatLogMessage("Failed to connect to server")]); + }); }, 90); - }, 100); - + }; + + startLogs(); }, []); const handleDragOver = (e: React.DragEvent) => { @@ -173,6 +189,7 @@ function UploadPage() { style={{ display: "none" }} onChange={handleFileChange} accept="audio/*,video/*" + disabled={!inputEnabled} />