Full Recap
After over 30 hours of hard work, I’ve successfully built and deployed an **AI-powered Tree Decoration Prediction App**! Here’s a detailed breakdown of what I learned and did during this technical journey:
Technical Overview
1. Model Training
- **Task:** I trained a **Recurrent Neural Network (RNN)** with Keras to classify images of trees into two categories: “decorated” and “not decorated.”
- **Learning:** I gained hands-on experience with machine learning, especially in image classification, and worked with `**.keras**` model files for saving and deploying models.
- **Challenge:** Choosing the right architecture (RNN) for image classification and tuning the model for optimal performance.
2. Backend Development
- **Task:** I created a **FastAPI** backend to handle image uploads and predictions. I used **Python** and **Uvicorn** to run the server.
- **Learning:** FastAPI was an excellent choice for building lightweight APIs with fast responses. I implemented image upload functionality and integrated the trained model for predictions.
- **Challenge:** Ensuring the backend could accept and process images correctly, which involved handling multipart form data and dealing with missing dependencies like `**python-multipart**`.
3. CORS Issues
- **Task:** I ran into **CORS (Cross-Origin Resource Sharing) errors** when trying to connect the frontend (React) with the backend (FastAPI).
- **Learning:** I learned how to configure CORS middleware in FastAPI to allow requests from my frontend.
- **Challenge:** It took some troubleshooting to correctly configure the CORS headers, especially in a development environment with different ports for the frontend and backend.
4. Dependency Management
- **Task:** I had to manage various **Python** dependencies for the backend, including packages for FastAPI, image handling, and model prediction.
- **Learning:** I became more familiar with managing **Python** environments and dependencies, and how to handle missing packages by installing them manually with pip.
5. Frontend Development
- **Task:** I built the frontend using **React**. Users can upload images, which are then sent to the backend for predictions.
- **Learning:** I strengthened my skills in React and frontend-backend integration. The frontend uses `**fetch()**` to interact with the FastAPI backend and displays predictions.
- **Challenge:** Ensuring seamless communication between the frontend and backend was tricky initially, but I resolved this by correctly structuring API calls.
6. Deployment to Google Cloud
- **Task:** I deployed the backend on **Google Cloud App Engine** and the frontend on Netlify.
- **Learning:** I learned how to configure and deploy a FastAPI app on Google Cloud, especially configuring the `**app.yaml**` file for deployment and using the `**gcloud**` CLI.
- **Challenge:** There were some issues with project configuration and App Engine settings, but after some trial and error, I got it to work.
7. Frontend Hosting on Netlify
- **Task:** I used **Netlify** for hosting the frontend. It integrates easily with React apps and deploys quickly.
- **Learning:** I gained experience with **CI/CD pipelines** and deploying React apps using Netlify’s simple interface.
8. Testing and Final Deployment
- **Task:** After deployment, I tested the entire app by uploading images and checking if the predictions worked.
- **Learning:** I refined my debugging skills and learned the importance of testing deployed systems to ensure everything runs smoothly in production.
- **Challenge:** Resolving a few bugs related to the model’s accuracy and image handling.
Non-Technical Overview
1. Problem-Solving and Adaptability
This project was a real test of my problem-solving abilities. I encountered several challenges, including CORS issues, missing dependencies, and configuration errors. I had to **adapt quickly and find solutions**, which improved my troubleshooting skills.
2. Learning Through Practice
Working on this project allowed me to apply theoretical knowledge to practical scenarios. It deepened my understanding of machine learning concepts, especially in image classification, and gave me valuable experience in **deploying full-stack web applications**.
3. Cloud and Deployment
The most rewarding part was learning about **cloud computing**, especially Google Cloud and Netlify. These platforms made deploying my app relatively painless once I got the hang of it.
4. Building Confidence
This project **boosted my confidence** in end-to-end development, machine learning, and deployment. It reinforced my belief that with perseverance, I can tackle complex technical challenges and successfully bring projects to life.