eagle-ai

byYashasvi paheriya

Act as a senior AI engineer, MLOps engineer, and 3D UI/UX designer. You are building a COMPLETE AI system called "VisionX". ⚠️ IMPORTANT CONTEXT: This project uses RF-DETR 2 from Roboflow for object detection. You MUST understand this pipeline: - Input image / webcam frame - Sent to Roboflow Inference API (or local inference server) - Model (RF-DETR 2) processes image - Returns predictions (bounding boxes, class labels, confidence) - Results are rendered visually on UI Your job is to build BOTH: 1. Frontend (Streamlit UI with 3D feel) 2. Proper integration with this AI pipeline -------------------------------------------------- 🔐 ENV VARIABLES (USE THESE) -------------------------------------------------- ROBOFLOW_API_KEY INFERENCE_MODE = "api" or "local" LOCAL_INFERENCE_URL = http://localhost:9001 HOSTED_INFERENCE_URL = https://serverless.roboflow.com -------------------------------------------------- 🧠 MODEL WORKFLOW (MUST IMPLEMENT) -------------------------------------------------- - Use inference-sdk (InferenceHTTPClient) - Dynamically choose endpoint: if INFERENCE_MODE == "local": use LOCAL_INFERENCE_URL else: use HOSTED_INFERENCE_URL - Send image to model: client.infer(image, model_id="rfdetr-medium") - Parse response: Extract: - bounding boxes - class names - confidence - Render using supervision: - BoxAnnotator - LabelAnnotator -------------------------------------------------- 🎨 UI DESIGN (PREMIUM) -------------------------------------------------- - Dark theme (#0f172a) - Glassmorphism (blur cards) - Neon glow accents (cyan/purple) - Smooth animations - Floating UI feel - Rounded corners -------------------------------------------------- 🌐 3D BACKGROUND (MANDATORY) -------------------------------------------------- Embed Spline or Three.js scene using: st.components.v1.html() -------------------------------------------------- 📐 UI STRUCTURE -------------------------------------------------- 1. HERO SECTION - VisionX 🚀 - AI-Powered Object Detection - Description: "VisionX is powered by RF-DETR 2 from Roboflow, delivering high-accuracy object detection using transformer-based architecture." - Add: "Built using Roboflow RF-DETR for state-of-the-art accuracy and real-time performance." -------------------------------------------------- 2. ABOUT SECTION - Explain system pipeline clearly: Input → Model → Detection → Output - Feature Cards: - Real-Time Detection - Transformer-Based Accuracy - Scalable AI Deployment -------------------------------------------------- 3. UPLOAD + DETECTION SECTION - Drag & Drop upload - Process image using model - Show: LEFT → Original image RIGHT → Annotated detection -------------------------------------------------- 4. LIVE DETECTION - Button: Start Webcam - Show placeholder or instructions -------------------------------------------------- 5. DASHBOARD - Show: - FPS (static or simulated if needed) - Objects detected - Avg confidence -------------------------------------------------- 6. FOOTER - "Built with AI • VisionX • Powered by Roboflow RF-DETR" -------------------------------------------------- ⚙️ SIDEBAR CONTROLS -------------------------------------------------- - Confidence slider - Model selector (nano → xlarge) - Toggle detection ON/OFF -------------------------------------------------- ✨ UI ENHANCEMENTS -------------------------------------------------- - Gradient animated text - Glow buttons - Hover scale effects - Blur glass cards -------------------------------------------------- 🧱 CODE STRUCTURE -------------------------------------------------- Functions: - render_hero() - render_about() - render_upload() - run_inference() - render_dashboard() - render_footer() -------------------------------------------------- 📦 OUTPUT FORMAT -------------------------------------------------- - Full working Streamlit code - Clean, modular, production-ready - No missing parts -------------------------------------------------- 🎯 GOAL -------------------------------------------------- Build a real AI product UI that understands the full ML pipeline — not just a frontend mock.

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document

System Requirements Document (SRD)

Project Title: eagle-ai

1. Introduction

Welcome to the System Requirements Document (SRD) for eagle-ai, an advanced AI-powered system designed to deliver cutting-edge object detection capabilities. This document outlines the functional and non-functional requirements, design concepts, and technical specifications necessary to build and deploy the system successfully.

eagle-ai leverages Roboflow's RF-DETR 2 model for high-accuracy object detection and integrates a visually dynamic, 3D-inspired user interface to ensure seamless interaction and real-time performance. The system is designed for deployment online, ensuring accessibility and scalability for users across India and beyond.

Page 1 of 8

2. System Overview

eagle-ai is an AI-driven object detection platform that processes input images or webcam frames through Roboflow's RF-DETR 2 model. The system pipeline is as follows:

  1. Input: Images or webcam frames are uploaded or captured.
  2. Processing: The input is sent to Roboflow's hosted inference API or a local inference server.
  3. Detection: RF-DETR 2 processes the input and returns predictions, including bounding boxes, class labels, and confidence scores.
  4. Output: Results are rendered visually on the user interface using advanced annotation tools.

The system is optimized for deployment online, ensuring scalability and accessibility for users. It features a premium, glassmorphic UI with 3D elements, making it visually engaging and intuitive.

3. Functional Requirements

Page 2 of 8

As story points:

  • As a User, I should be able to upload images for object detection.
  • As a User, I should be able to start live webcam detection.
  • As a User, I should be able to view detection results with bounding boxes, class labels, and confidence scores.
  • As a User, I should be able to adjust detection confidence thresholds using a slider.
  • As a User, I should be able to select different model sizes (nano → xlarge).
  • As a User, I should be able to toggle detection ON/OFF.
  • As a User, I should be able to view a dashboard displaying FPS, objects detected, and average confidence.
  • As a User, I should be able to interact with a visually dynamic 3D background on the homepage.

4. User Personas

1. Admin

  • Responsible for managing system configurations and monitoring performance.
  • Can access advanced settings for inference modes and API keys.

2. User

  • Primary end-user who uploads images or uses the webcam for object detection.
  • Interacts with the UI to view detection results and adjust settings.
Page 3 of 8

3. Guest

  • Limited access to explore the system's features without uploading images or using the webcam.

5. Visuals Colors and Theme

Color Palette:

  • Background: #0f172a (Dark theme)
  • Surface: #1e293b (Glassmorphic blur cards)
  • Text: #e2e8f0 (Light gray for readability)
  • Accent: #38bdf8 (Neon cyan glow)
  • Muted Tones: #64748b (Subtle gray for secondary elements)

Theme:

The design follows a glassmorphic aesthetic with neon glow accents and smooth animations. Rounded corners and a floating UI feel enhance the user experience.

6. Signature Design Concept

Page 4 of 8

Interactive 3D Galaxy Homepage

The homepage of eagle-ai will feature an interactive 3D galaxy map created using Spline or Three.js. Users will navigate through a futuristic galaxy where each star represents a feature or section of the platform.

Details:

  • Background: A dynamic galaxy scene with glowing stars and nebulae.
  • Interaction: Hovering over stars reveals tooltips with feature descriptions.
  • Animations: Smooth transitions as users move between sections.
  • Micro-interactions: Clicking on a star zooms into the corresponding section, such as "Upload Image" or "Live Detection."
  • Color Shifts: The galaxy subtly changes colors based on user interactions, transitioning between cyan, purple, and muted tones.

This design ensures a memorable first impression and aligns with the futuristic theme of the project.

7. Non-Functional Requirements

  • Performance: The system must process images and webcam frames in real-time with minimal latency.
  • Scalability: The system must support multiple concurrent users without degradation in performance.
  • Security: API keys and sensitive data must be securely stored and accessed.
  • Accessibility: The UI must be intuitive and accessible to users of varying technical expertise.
  • Deployment: The system must be deployed online, ensuring global accessibility.
Page 5 of 8

8. Tech Stack

Frontend:

  • React for Web
  • Streamlit for rapid UI development

Backend:

  • Python
  • FastAPI for API integration

Database:

  • MySQL for structured data storage
  • MongoDB for unstructured data storage

AI Models:

  • RF-DETR 2 for object detection
  • GPT 5.4 for user-friendly responses

AI Tools:

  • Litellm for LLM Routing
  • Langchain for pipeline orchestration

Local Orchestration:

  • Docker
  • docker-compose
Page 6 of 8

Server-Side Orchestration:

  • Kubernetes for deployment and scaling

9. Assumptions and Constraints

Assumptions:

  • Users will primarily access the system online.
  • Roboflow's hosted inference API will be used for object detection.
  • The system will support real-time detection with minimal latency.

Constraints:

  • Deployment must adhere to cloud-based requirements.
  • The system must operate within the limits of Roboflow's API usage policies.
  • The UI must be optimized for performance without compromising visual quality.
Page 7 of 8

10. Glossary

  • RF-DETR 2: A transformer-based object detection model developed by Roboflow.
  • Glassmorphism: A UI design trend characterized by translucent surfaces and blur effects.
  • Spline: A tool for creating 3D scenes and animations.
  • Inference: The process of running a trained AI model to make predictions on input data.
  • Bounding Box: A rectangular box used to highlight detected objects in an image.
  • Confidence Score: A numerical value indicating the certainty of a detection.

Let me know if you'd like further refinements or additional sections, Yashasvi!
Page 8 of 8

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: View Hero
Login: Sign In
Dashboard: Monitor Stats
Settings: Configure API Keys
Settings: Select Inference Mode
Settings: Manage Model Config

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: View Hero
Login: Sign In
Dashboard: Monitor Stats
Settings: Configure API Keys
Settings: Select Inference Mode
Settings: Manage Model Config