Day 20 - Cloud Deployment, AI Optimization, and Frontend Progress

Summary: Today was dedicated to overcoming backend connectivity issues, optimizing the AI engine for cloud deployment, and building out a modern, responsive frontend dashboard. The day involved troubleshooting, infrastructure adaptation, and UI/UX improvements to move the project closer to a robust, production-ready state.

Goals for Today

Resolve backend database connectivity and deploy the API to the cloud.
Adapt the AI engine for server environments without GPU support.
Advance the frontend dashboard with real-time data and modern design.
Identify and address blockers for a smooth development workflow.

1. Backend Infrastructure: Railway Deployment

The day began with a persistent psycopg2.OperationalError (connection timeout) when connecting to PostgreSQL from a local machine. Investigation revealed the root cause was network-level (blocked port or disabled public access). This highlighted the importance of understanding cloud networking and the limitations of local-to-cloud connections for managed databases.

How it was solved:

The FastAPI backend was deployed to Railway, utilizing its Internal Private Networking (postgres.railway.internal). This bypassed external firewall issues and enabled seamless database connectivity.
The backend now returns a successful 200 OK and an empty list [], confirming the connection is stable.
Learned how cloud platforms like Railway simplify internal service communication, but require careful configuration for public access and security.
Documented the deployment process for future reference and team onboarding.

2. AI Engine Optimization for Cloud

The AI engine was refactored to ensure compatibility and efficiency in the Railway cloud environment. This required adapting to the lack of GPU/EGL support and optimizing for CPU inference:

Integrated MediaPipe (Face Landmarker), BlazeFace, and ONNX-based hat & glasses detectors, ensuring all models load correctly in a headless server environment.
Configured the engine to automatically fall back to CPU (XNNPACK delegate) when GPU/EGL is unavailable, as is the case on Railway. This ensures reliability regardless of deployment target.
Used FastAPI’s lifespan context manager for efficient model loading and memory cleanup, ensuring optimal resource management and preventing memory leaks during container restarts.
Added logging for model load times and inference performance to monitor resource usage and optimize further if needed.
Reflected on the importance of designing AI pipelines that are portable and robust to hardware constraints.

3. Frontend Development: Svelte & Tailwind

Major improvements were made to the frontend dashboard, focusing on both functionality and user experience:

Built a modern Svelte component for the Patient Directory, laying the foundation for future expansion (e.g., patient detail views, editing, and analytics).
Integrated axios for async data fetching from the deployed API, ensuring the UI stays up-to-date with backend changes.
Added a reactive search feature for real-time patient filtering, improving usability for large datasets.
Designed a responsive table with status badges (e.g., “Verified”) and action icons, making the interface visually informative and interactive.
Fixed layout issues by restructuring the dashboard container for a clean, centered appearance, and tested responsiveness on multiple devices.
Explored Svelte’s reactivity model and Tailwind’s utility-first approach, which accelerated development and made styling more maintainable.

4. Blockers & Troubleshooting

Two main blockers were encountered and addressed, each providing valuable lessons:

Tailwind Compilation: The frontend appeared unstyled due to configuration issues. This was resolved by renaming the config file to tailwind.config.mjs and ensuring @tailwind directives were present in the global CSS. This reinforced the importance of matching build tool expectations and reading error logs carefully.
Empty Database: The API returned an empty list, making UI scaling hard to test. Manual row insertion via the Railway Data tab is now required for final visual verification. This highlighted the need for seed data and possibly automated test fixtures for future development.
Documented troubleshooting steps and solutions for future reference.

Next Steps

Finalize CSS Injection: Restart the Svelte dev server to confirm Tailwind styles are applied after the config fix. Consider adding automated style checks to the build process.
AI Validation Testing: Begin testing the /validate endpoint by sending real image payloads from the frontend. Log results and edge cases for further model improvement.
CRUD Functionality: (Optional) Implement an “Add Patient” modal in the frontend to allow data entry without direct database access. Plan for form validation and error handling.
Seed/Test Data: Develop scripts or utilities to populate the database with sample data for more robust frontend and backend testing.
Documentation: Continue documenting deployment, troubleshooting, and development workflows to streamline onboarding and future maintenance.