cinivision ai

AI-powered pre-production assistant that analyzes screenplays, estimates production costs, detects budget risks, and suggests affordable alternatives to help filmmakers create shootable films.

Comment

How We Built CiniVision AI

We built CiniVision AI entirely on Replit to enable rapid cloud-based development, real-time collaboration, and one-click deployment. Our goal was to create an AI-powered cinema companion capable of recommending movies, generating Epic Rap Battles (ERB), creating AI-powered movie content, and delivering a modern cinematic experience through Google's AI technologies.

1. Setting up the Replit Workspace

We started by creating a new Python Replit project since our backend was built with Python.

  • Created a new Replit workspace.
  • Selected the Python template.
  • Organized the project into frontend, backend, assets, and configuration folders.
  • Enabled Secrets in Replit for storing API keys securely instead of hardcoding them.

Project structure:

cinivision-ai/
│
├── app.py
├── requirements.txt
├── .replit
├── replit.nix
│
├── backend/
│   ├── api.py
│   ├── ai_engine.py
│   ├── movie_service.py
│   ├── erb_generator.py
│   └── utils.py
│
├── frontend/
│   ├── templates/
│   ├── static/
│   │   ├── css/
│   │   ├── js/
│   │   └── images/
│
├── data/
├── prompts/
└── README.md

This structure kept the application modular and made it easier to maintain during the hackathon.

2. Configuring the Environment

We installed the required Python packages using requirements.txt.

Example packages:

Flask
google-genai
requests
python-dotenv
gunicorn

Replit automatically installed dependencies after running:

pip install -r requirements.txt

Sensitive information such as API keys was stored using Replit Secrets, for example:

GEMINI_API_KEY
TMDB_API_KEY

The application accessed them through environment variables rather than embedding credentials in the source code.

3. Building the Backend

The backend was implemented using Flask.

Major API endpoints included:

  • Movie recommendations
  • AI-powered search
  • Movie information retrieval
  • Epic Rap Battle generation
  • AI content generation

The backend communicates with Google Gemini for natural language generation and external movie databases for live movie information.

Each module has a single responsibility, making debugging and future feature additions much easier.

4. Building the Frontend

The frontend consists of responsive HTML, CSS, and JavaScript.

Key pages include:

  • Home dashboard
  • AI movie assistant
  • Movie recommendation interface
  • Epic Rap Battle generator
  • AI-generated content pages

JavaScript communicates with the Flask backend using REST API calls.

Example:

fetch("/api/recommend",{
    method:"POST",
    body:JSON.stringify(data)
})

This clean separation between frontend and backend simplified development and testing.

5. Connecting Frontend and Backend

The frontend sends requests to Flask endpoints.

Typical workflow:

User

↓

Frontend (HTML + JS)

↓

Flask API

↓

Google Gemini API

↓

Movie Database APIs

↓

Response

↓

Frontend Updates

This architecture keeps AI processing on the server while maintaining a responsive user interface.

6. Running and Testing in Replit

Development was straightforward using Replit's integrated environment.

Steps:

  1. Press Run.
  2. Replit installs dependencies automatically.
  3. Flask starts the development server.
  4. Open the generated web URL.
  5. Test every feature through the browser.
  6. Monitor logs using Replit's Console for debugging.

We also verified:

  • AI responses
  • API connectivity
  • UI responsiveness
  • Error handling
  • Mobile compatibility

7. Common Replit Troubleshooting

During development we encountered and resolved several Replit-specific issues.

Package installation errors

pip install -r requirements.txt

or rebuild the environment if dependencies became inconsistent.

Environment variable issues

Verified that all API keys were correctly stored in Replit Secrets and referenced using environment variables.

Port binding

Configured Flask to use the port provided by Replit:

port = int(os.environ.get("PORT",8080))
app.run(host="0.0.0.0",port=port)

Module import errors

Maintained a clear folder structure and consistent imports to avoid path-related problems.

8. Deployment

After testing, deployment required only a few clicks.

  • Selected Deploy inside Replit.
  • Replit automatically built the application.
  • A public HTTPS URL was generated.
  • The deployed application remained accessible directly from the browser without additional server configuration.

9. Best Practices Followed

Throughout development we adopted several practices that improved reliability and maintainability.

  • Organized code into independent modules.
  • Stored secrets securely.
  • Used version control for incremental development.
  • Kept frontend and backend separate.
  • Added meaningful code comments.
  • Reused utility functions to reduce duplication.
  • Tested every API endpoint before integrating it into the UI.

This workflow allowed us to build CiniVision AI quickly while maintaining clean architecture, scalable code, and a deployment-ready application entirely within Replit's cloud development environment.

Built With

Share this project:

Updates

Submission history