Skip to content

Add Web Frontend for prompt-ops#59

Merged
heyjustinai merged 97 commits intomainfrom
frontend
Dec 30, 2025
Merged

Add Web Frontend for prompt-ops#59
heyjustinai merged 97 commits intomainfrom
frontend

Conversation

@heyjustinai
Copy link
Copy Markdown
Member

What does this PR do?

This PR introduces a web-based frontend for prompt-ops, providing an intuitive graphical interface for prompt optimization workflows. Previously, prompt-ops was CLI-only, this adds a modern web UI to make the library accessible to a broader audience.

Web Frontend (frontend/)

  • React 18 + TypeScript application with Vite build system
  • Onboarding Wizard: Step-by-step guided configuration:
    • Use case selection
    • Dataset upload with preview
    • Field mapping interface
    • Model/provider configuration with connection testing
    • Metrics and optimizer selection
  • Real-time Optimization: WebSocket-based live progress updates
  • Results View: Diff comparison of original vs optimized prompts
  • In-app Documentation: Embedded docs viewer

FastAPI Backend (frontend/backend/)

  • REST API server bridging the frontend to prompt-ops core
  • Dataset management endpoints
  • Prompt optimization endpoints with WebSocket support
  • API key validation and connection testing
  • Test suite with pytest

Core Library Updates

  • Renamed: llama-prompt-opsprompt-ops across the codebase
  • New utility modules (extraction, JSON, summary, telemetry)
  • Enhanced prompt strategies

Access at http://localhost:8081

Test Plan

Terminal 1 - Backend:

cd frontend/backend
pip install -r requirements.txt
uvicorn main:app --reload --port 8001

Terminal 2 - Frontend:

cd frontend
npm install
npm run dev

Checklist

  • Frontend builds successfully
  • Backend starts without errors
  • End-to-end optimization flow works
  • Documentation updated

…rchitecture

- Replace OpenAI client with OpenRouter across all endpoints
- Implement enhance_prompt_with_openrouter shared function for DRY architecture
- Add advanced CoT-based system message for enhanced prompt engineering
- Change default mode from 'enhance' to 'migrate' in frontend
- Add experimental badge to enhance option in UI
- Fix sliding indicator positioning with CSS Grid layout
- Consolidate fallback migration to use same enhancement logic
- Update API key handling for OPENROUTER_API_KEY throughout system
…rchitecture

- Replace OpenAI client with OpenRouter across all endpoints
- Implement enhance_prompt_with_openrouter shared function for DRY architecture
- Add advanced CoT-based system message for enhanced prompt engineering
- Change default mode from 'enhance' to 'migrate' in frontend
- Add experimental badge to enhance option in UI
- Fix sliding indicator positioning with CSS Grid layout
- Consolidate fallback migration to use same enhancement logic
- Update API key handling for OPENROUTER_API_KEY throughout system
heyjustinai and others added 28 commits December 17, 2025 14:23
- Introduced pytest configuration in `pytest.ini` for backend tests.
- Added coverage reporting settings to track test coverage.
- Created initial test suite structure with unit and integration tests.
- Implemented sample datasets and fixtures for testing.
- Added coverage report generation in JSON and HTML formats.
- Included comprehensive README for test suite usage and structure.
…ionality

- Temporarily hide the Projects List Section in MainContent for future project management features.
- Update DatasetUploader to include a Trash2 icon for file removal.
- Adjust FieldMappingInterface and MetricsSelector for better text clarity and layout.
- Enhance OnboardingWizard with a stepper navigation and diff view for prompt comparison.
- Simplify UseCaseSelector by removing unnecessary helper text.
- Refactor WizardSection to always display content, removing collapsible functionality for a more straightforward user flow.
…omparison

- Introduced a new UnifiedDiffView component to display all changes inline.
- Added a toggle for switching between split and unified view modes.
- Enhanced the diff display with word count statistics for added and removed words.
- Improved layout and styling for better user experience in the optimization results section.
…onents

- Added a custom HTTP exception handler in the backend to log error details.
- Updated DatasetUploader to display record and field counts after file upload.
- Modified OnboardingWizard to capture and store dataset record and field counts.
- Improved error handling in dataset upload process to provide detailed feedback.
…omponents

- Added a new endpoint in the backend to test connections to model providers using LiteLLM.
- Enhanced error extraction for user-friendly messages from LiteLLM exceptions.
- Updated ModelProviderSelector to handle connection status and errors more effectively.
- Improved user experience by clearing error messages when connection-related fields are modified.
- Refactored API testing logic to utilize the new backend endpoint for better validation of API keys and configurations.
- Updated input and select components to use a unified styling approach.
- Enhanced focus and placeholder styles for better accessibility and user experience.
- Adjusted button and option styles for improved visual feedback and clarity.
…and frontend components for improved user experience
…rporate useDefaultKey flag for API key handling, improving configuration management and validation logic.
…nents by adding ARIA attributes and updating text color for better visibility
…instructions; change backend port to 8001 for consistency.
@meta-cla meta-cla bot added the CLA Signed This label is managed by the Meta Open Source bot. label Dec 30, 2025
@heyjustinai heyjustinai merged commit f6ce997 into main Dec 30, 2025
3 of 9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants