🤖 Vertex AI Data Converter

A modern web application that converts text and images to structured data using Google's Gemini models through Vertex AI. This app provides a user-friendly interface for individual data processing with Pydantic schema validation.

🌟 Features

• Multi-Modal Input: Process text, images, or both simultaneously
• Pydantic Schema Support: Define data models in Python format and auto-convert to JavaScript
• Schema Validation: Validate AI outputs against your defined schemas
• Side-by-Side Visualization: View input and output data side by side
• Modern UI: Beautiful, responsive design with intuitive controls
• Real-time Processing: Direct integration with Google Vertex AI
• Error Handling: Comprehensive error reporting and validation feedback

🚀 Getting Started

Prerequisites

1. Google Cloud Project with Vertex AI API enabled
2. Authentication set up for your project
3. Modern web browser (Chrome, Firefox, Safari, Edge)

Setup

1. Download the App

   # Save the index.html file to your local machine

2. Get Your Access Token

   # Install Google Cloud CLI if you haven't already
   # https://cloud.google.com/sdk/docs/install
   
   # Authenticate and get access token
   gcloud auth login
   gcloud auth print-access-token

3. Open the App

   • Open index.html in your web browser
   • Or serve it using a local server:

     # Python
     python -m http.server 8000
     
     # Node.js
     npx serve .

🎯 How to Use

1. Configuration

• Project ID: Enter your Google Cloud project ID
• Location: Select your preferred region (default: us-central1)
• Model: Choose between Gemini models
• Access Token: Paste your GCP access token

2. Define Schema

You can define your data schema in several ways:

Option A: Use Example Schemas

Click on the provided example schemas (Person or Product) to load them automatically.

Option B: Paste Python Pydantic Model

class Person(BaseModel):
    first_name: str
    last_name: str
    age: Optional[int] = None
    email: Optional[str] = None
    middle_names: List[str] = []
    titles: List[str] = []
    extra_info: List[str] = []

Option C: Write JavaScript Schema

The app will auto-convert Python schemas, but you can also define them directly.

3. Input Data

Choose your input type:

• Text: Paste text data for processing
• Image: Upload an image file (drag & drop supported)
• Text + Image: Combine both for multi-modal processing

4. Process & View Results

• Click "🚀 Process Data" to send your request
• View results side-by-side with input
• Check validation status against your schema

📋 Example Use Cases

Text Processing

Input: "John Smith, age 35, works as a software engineer at Google"
Schema: Person model
Output: Structured JSON with extracted fields

Image Processing

Input: Photo of a business card
Schema: Contact model
Output: Extracted contact information

Multi-Modal Processing

Input: Product description + product image
Schema: Product model
Output: Complete product data structure

🛠️ Technical Details

API Integration

The app uses the OpenAI-compatible Vertex AI endpoint:

https://{location}-aiplatform.googleapis.com/v1beta1/projects/{project}/locations/{location}/endpoints/openapi

Schema Conversion

Python Pydantic models are converted to JSON Schema format for validation:

• str → string
• int → integer
• float → number
• bool → boolean
• List[T] → array
• Optional[T] → nullable field
• Dict → object

Validation

Client-side validation checks:

• Required fields presence
• Data type matching
• Array/object structure

🔧 Configuration Options

Model Settings

• Gemini 2.0 Flash Lite: Fast, cost-effective processing
• Gemini 2.5 Flash Preview: Enhanced capabilities

Regions

• us-central1 (default)
• us-east1
• us-west1
• europe-west1

🎨 UI Features

• Responsive Design: Works on desktop and mobile
• Drag & Drop: Easy image uploads
• Real-time Feedback: Loading states and error messages
• Syntax Highlighting: JSON output formatting
• Auto-resizing: Text areas adapt to content

🔒 Security Notes

• Access tokens are stored only in browser memory
• No data is persisted locally
• All communication is HTTPS encrypted
• Tokens expire automatically (typically 1 hour)

🐛 Troubleshooting

Common Issues

1. "Access token invalid"

   • Regenerate token: gcloud auth print-access-token
   • Check token expiration (usually 1 hour)

2. "API call failed"

   • Verify project ID and region
   • Check Vertex AI API is enabled
   • Ensure proper authentication

3. "Schema validation errors"

   • Review schema definition
   • Check required vs optional fields
   • Verify data types match

4. "Failed to parse JSON"

   • Model output may be malformed
   • Try adjusting the prompt
   • Check model temperature settings

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

Feel free to submit issues, feature requests, or pull requests to improve the application.

---

Note: This app is designed for individual data processing. For bulk processing, refer to the original Python script (main.py).