The screenshot-to-code project, maintained by Abi Raja, is an AI-driven tool designed to convert screenshots, mockups, and Figma designs into functional code across various tech stacks. It supports multiple AI models and has experimental features for video/screen recording conversions. The project is highly active, with over 51,000 stars on GitHub and significant community engagement. Recent activities indicate a strong focus on testing infrastructure and user experience improvements. However, there are notable risks related to unresolved issues and long-pending pull requests.
Summary
Detailed Reports
frontend/src/tests/qa.test.ts, frontend/jest.config.js).frontend/src/App.tsx, frontend/src/components/evals/EvalsPage.tsx).README.md, .github/ISSUE_TEMPLATE).milseg).Unresolved Issues:
Long-Pending Pull Requests:
Testing Infrastructure:
frontend/src/tests/qa.test.ts).Experimental Features:
Configuration Enhancements:
Community Engagement:
The screenshot-to-code project is in a healthy state with active development led by Abi Raja. Recent activities focus on enhancing testing infrastructure and user experience. However, unresolved high-priority issues and long-pending pull requests pose risks that need addressing to maintain project stability. Prioritizing these areas will help streamline development efforts and improve overall project health.
| Developer | Avatar | Branches | PRs | Commits | Files | Changes |
|---|---|---|---|---|---|---|
| Abi Raja |  |
3 | 2/1/0 | 24 | 23 | 3468 |
| Ashwani (SYNAX07) | 0 | 1/0/1 | 0 | 0 | 0 | |
| None (shaoyun) | 0 | 1/0/0 | 0 | 0 | 0 |
PRs: created by that dev and opened/merged/closed-unmerged during the period
The project, screenshot-to-code, is a tool designed to convert screenshots, mockups, and Figma designs into clean, functional code using AI. It supports various tech stacks including HTML + Tailwind, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind, and SVG. The AI models supported include GPT-4O, GPT-4 Turbo (Apr 2024), GPT-4 Vision (Nov 2023), Claude 3 Sonnet, and DALL-E 3 for image generation. The project also has experimental support for converting video/screen recordings into functional prototypes. The project is maintained by Abi Raja and has gained significant traction with over 51,000 stars on GitHub.
The repository was created on November 14, 2023, and the latest push was on May 21, 2024. The project is actively maintained with a considerable number of commits (522) and branches (14). It has a large community engagement with 6,263 forks and 91 open issues.
Abi Raja is the primary contributor to the project. Below is a detailed list of recent commits authored by Abi Raja in reverse chronological order:
0 days ago - Merge pull request #337 from abi/qa-testing
frontend/.gitignore (+3, -0)frontend/jest.config.js (added, +9)frontend/package.json (+7, -1)frontend/src/.env.jest.example (added, +2)frontend/src/App.tsx (+3, -3)frontend/src/components/ImageUpload.tsx (+1, -1)frontend/src/components/ImportCodeSection.tsx (+4, -2)frontend/src/components/UrlInputSection.tsx (+1, -1)frontend/src/components/history/utils.test.ts (+145, -144)frontend/src/setupTests.ts (added, +3)frontend/src/tests/fixtures/simple_button.png (added, +0)frontend/src/tests/fixtures/simple_ui_with_image.png (added, +0)frontend/src/tests/qa.test.ts (added, +274)frontend/yarn.lock (+2108, -23)0 days ago - Add comments
frontend/src/tests/qa.test.ts (+5, -1)1 day ago - Minor fixes
frontend/src/tests/qa.test.ts (+3, -3)1 day ago - Merge branch 'main' into qa-testing
.github/ISSUE_TEMPLATE/bug_report.md (added, +21).github/ISSUE_TEMPLATE/custom.md (added, +10).github/ISSUE_TEMPLATE/feature_request.md (added, +20)README.md (+6, -4)Troubleshooting.md (+2, -1)backend/llm.py (+6, -1)backend/routes/evals.py (+21, -12)backend/routes/generate_code.py (+2, -1)backend/run_evals.py (+13, -7)backend/test_llm.py (+5, -0)frontend/src/App.tsx (+26, -1)frontend/src/components/evals/EvalsPage.tsx (+15, -11)frontend/src/lib/models.ts (+5, -2)1 day ago – Attempt to test import from code
– Files:
– frontend/src/components/ImportCodeSection.tsx (+4,-2)
– frontend/src/tests/qa.test.ts(+41,-36)
1 day ago – Fix up update tests
– Files:
– frontend/src/tests/qa.test.ts(+5,-5)
1 day ago – Add example for jest env
– Files:
– frontend/src/.env.jest.example(added,+2)
1 day ago – Read fixtures path from env var
– Files:
– frontend/.gitignore(+2,-2)
– frontend/src/tests/fixtures/simple_button.png(added,+0)
– frontend/src/tests/fixtures/simple_ui_with_image.png(added,+0)
– frontend/src/tests/qa.test.ts(+14,-15)
1 day ago – Make env vars work
– Files:
– frontend/jest.config.js(+1,-0)
– frontend/package.json(+1,-0)
– frontend/src/setupTests.ts(added,+3)
– frontend/src/tests/qa.test.ts(+48,-43)
– frontend/yarn.lock(+5,-0)
1 day ago – Clean up test code – Files: – frontend/src/App.tsx(+1,-1) – frontend/src/tests/qa.test.ts(+198,-97)
1 day ago– Remove console.log – Files: – frontend/src/tests/qa.test.ts(+0,-2)
3 days ago– Add testing for edits – Files: – frontend/src/tests/qa.test.ts(+100,-38)
3 days ago– Also iterate through stacks – Files: – frontend/src/tests/qa.test.ts(+38,-33)
3 days ago– Clean up the code – Files: – frontend/src/tests/qa.test.ts(+33,-33)
4 days ago– Set up a basic puppeteer test – Files: – frontend/.gitignore(+3,-0) – frontend/jest.config.js(added,+8) – frontend/package.json(+6,-1) – frontend/src/components/history/utils.test.ts(+145,-144) – frontend/src/tests/qa.test.ts(added,+95) – frontend/yarn.lock(+2103,-23)
5 days ago– Update issue templates – Files: .github/ISSUE_TEMPLATE/custom.md(added,+10) .github/ISSUE_TEMPLATE/feature_request.md(added,+20)
5 days ago– Update issue templates .github/ISSUE_TEMPLATE/custom.md(added,+10) .github/ISSUE_TEMPLATE/feature_request.md(added,+20)
7 days ago– Add GPT4o message frontend/src/App.tsx(+13,-0) frontend/src/lib/models.ts(+1,-1)
8 days ago– Update README.md README.md(+1,-1)
8 days ago– Update README.md README.md(+4,-3)
8 days ago– Add another unit test for new model backend/test_llm.py(+5,-0)
8 days ago– Support GPT-4o backend/routes/generate_code.py(+2,-1) backend/run_evals.py(+2,-2) frontend/lib/models.ts(+3,-0)
llm.py, routes), frontend development (App.tsx, components), testing (qa.test.ts, setupTests), and documentation (README.md, issue templates).milseg) who contributed to fixing API key generation steps.Overall, the project appears to be in a healthy state with active development and continuous improvements being made by the team led by Abi Raja.
Recent GitHub issue activity for the project has been quite high, with multiple new issues created in the last few days.
Several issues exhibit notable anomalies and complications. For example, #336 and #335 both involve problems with OpenAI API requests, but the specifics differ: #336 shows a successful request without code generation, while #335 involves a backend service connection closing unexpectedly. Another significant issue is #332, where a user encounters a "model not found" error for gpt-4o-2024-05-13, indicating potential configuration or access issues. Additionally, #331 highlights issues with screen recording uploads leading to connection errors.
Common themes among the issues include API connection errors, model access problems, and difficulties with video processing. Several users report similar errors related to API keys and proxy configurations, suggesting recurring issues with environment setup.
#336: something went wrong
#335: After uploading the image, the backend service shows that the connection is closed directly, but it is normal to check the script file, I hope to know the reason.
#332: gpt-4o-2024-05-13 does not exist
#331: I deploy the project on the server and use https to upload screenshots to generate code, but it will make an error if I record the screen.
#329: Add field for Anthropic API key in settings
#328: Please add Gemini 1.5 Flash model
#327: Cant generate code
#326: Error with code generation
#324: Add support for deepseek
10.#323: Closing this because there's too many people talking about too many different issues. Please open new separate issues if you need help. -Priority: Low Status: Closed Created:7days ago Updated:7days ago Details: Issue closed due to too many different topics being discussed in one thread; users are asked to open separate issues for individual problems.
PR #329: Add field for Anthropic API key in settings
PR #322: Added support for AWS Bedrock Claude3
PR #84: Feat: Support uploading pdfs
PR #317: Changed node version from 20.9 to 22
PR #244: feat: REUSABLE COMPONENTS FOR REPEATING ELEMENTS, Enhancing maintainability
PR #238: add Flutter widget template
PR #237: add vue-css template
PR #228: Added CSS as styles in REACT
PR #227: Add HTML/CSS system prompt and update stack descriptions
PR #199: Converted project into a python package
PR #193: Added nicer frames for web and mobile
PR #186: Add AZURE support Created: 159 days ago Edited: 123 days ago Summary: Adds support for Azure OpenAI Services (Vision & DALLE-3). Comments & Review Feedback: Discussion on condition checks and priority handling between Azure and OpenAI settings. Notable Issues: Important addition but delayed due to low token limits per minute on Azure GPT-4 Vision.
PR #171: Better docker deployment strategy Created: 165 days ago Edited: 126 days ago Summary: Proposes a better Docker deployment strategy using Alpine Linux, reducing image size significantly. Comments & Review Feedback: Positive feedback from users who tested it successfully. Notable Issues: Significant improvement in deployment efficiency but requires thorough validation across different environments.
PR #93: Follow up: Means of Evaluation and Instruction Automatic Generation Created: 179 days ago Edited: 169 days ago Summary: Introduces automatic generation of instructions and evaluation using vision comparison. Comments & Review Feedback: Concerns about accuracy and hallucination issues with GPT-4 vision comparisons; suggestions for UI improvements. Notable Issues:** Experimental feature with potential but needs refinement to ensure reliability and accuracy.
PR #337: Add e2e tests Created & Closed: Same day (0 days) Merged by Abi Raja (abi) Summary: Adds end-to-end tests using Puppeteer, enhancing test coverage and reliability. Notable Issues: Significant improvement in testing infrastructure, ensuring better quality assurance.
PR #333: screenshot-to-code Created & Closed: Same day (3 days) Not merged. Summary & Comments:** Attempted to add a GitHub Actions workflow; identified issues with flake8 linting step potentially masking errors.
PR #314: Added new tech stack Created & Closed: Same day (26 days) Not merged. Summary & Comments:** Attempted to add TypeScript as a supported stack; closed without merging, possibly due to lack of necessity or conflicts.
PR #308 & PR #306: Adding one-click deploy templates (Render.com & RepoCloud) Created & Closed: Same day (34 days) Not merged. Summary & Comments: Attempted to add one-click deploy templates; closed without merging due to concerns about third-party services' reliability or relevance.
PR #307: Update llm.py separate -> separate Created & Closed: Same day (34 days) Not merged. Summary & Comments: Minor typo fix; closed as the TODO comment was planned for removal anyway.
PR #304: Fix step by step API key generation Created & Closed: Same day (39 days) Merged by Abi Raja (abi) Summary: Improved documentation by adding specific steps for generating OpenAI API keys. Notable Issues: Enhances user onboarding experience by providing clearer instructions.
Other notable closed PRs include: PR #258: Added responsiveness in the Homepage Merged, improving user experience on different devices (#256). PR #257: Add support for video uploads (with Claude Opus) Merged, expanding functionality to handle video inputs.
The project has several open pull requests that are significant enhancements or fixes but have been pending for extended periods, indicating potential bottlenecks in review or implementation processes. The recently closed pull requests show active maintenance and improvements in testing infrastructure, documentation, and user experience enhancements. Prioritizing the review and merging of long-pending PRs like #84 (PDF upload support) and addressing critical architectural changes like those proposed in #199 (Python package conversion) could help streamline development efforts and improve project stability.
This pull request introduces a new field in the settings UI for capturing the Anthropic API key, enhancing the application's configuration capabilities.
SettingsDialog Component:
settings state, ensuring it is stored only in the browser and not on servers.Settings Type Update:
Settings interface in frontend/src/types.ts to include a new property anthropicApiKey.setSettings ensures that the state is updated appropriately when the input value changes.anthropicApiKey property to the Settings interface ensures type safety across the application. This helps prevent potential runtime errors related to missing or incorrect properties.Settings interface, following similar naming conventions and types.diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 2e7814b6..1a9c5a6b 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -108,6 +108,26 @@ function SettingsDialog({ settings, setSettings }: Props) {
</>
)}
+ <Label htmlFor="anthropic-api-key">
+ <div>Anthropic API key</div>
+ <div className="font-light mt-2 leading-relaxed">
+ Only stored in your browser. Never stored on servers. Overrides
+ your .env config.
+ </div>
+ </Label>
+
+ <Input
+ id="anthropic-api-key"
+ placeholder="Anthropic API key"
+ value={settings.anthropicApiKey || ""}
+ onChange={(e) =>
+ setSettings((s) => ({
+ ...s,
+ anthropicApiKey: e.target.value,
+ }))
+ }
+ />
+
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Screenshot by URL Config</AccordionTrigger>
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index bbabeff3..dbe10adf 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -16,6 +16,7 @@ export interface Settings {
codeGenerationModel: CodeGenerationModel;
// Only relevant for hosted version
isTermOfServiceAccepted: boolean;
+ anthropicApiKey: string | null; // Added property for anthropic API key
}
export enum AppState {
The changes introduced in this pull request are straightforward yet significant for enhancing configuration capabilities. The code quality is high, with proper state management and type safety considerations. The user experience is also improved with clear labeling and placeholder text.
Overall, this PR can be merged with confidence, as it adheres to best practices and maintains consistency within the codebase.
frontend/src/tests/qa.test.tsdescribe blocks for different test scenarios.beforeAll and afterAll hooks for setup and teardown.App class encapsulating test logic.client.send("Page.setDownloadBehavior")) which should be cleaned up or clarified._screenshot method.backend/routes/generate_code.pywrite_logs, throw_error, etc.stream_code is quite lengthy and could benefit from further modularization.stream_code function into smaller, more manageable functions.frontend/src/components/ImageUpload.tsxuseState, useEffect, useMemo) for state management and lifecycle events.react-dropzone library for drag-and-drop functionality.baseStyle, focusedStyle, etc.backend/llm.pyLlm).DebugFileWriter.stream_claude_response_native is quite complex and could benefit from further modularization.frontend/src/components/evals/EvalsPage.tsxuseState, useEffect) for state management and lifecycle events.backend/test_llm.pyfrontend/src/App.tsxuseState, useEffect, etc.) extensively for state management and lifecycle events.frontend/src/components/history/utils.test.tsbackend/mock_llm.pyfrontend/src/components/ui/button.tsxThe provided source files are generally well-written with clear separation of concerns, effective use of modern libraries/frameworks, comprehensive error handling, and thorough testing. However, there are areas that can benefit from further modularization, cleanup of commented-out code, moving inline styles to CSS modules/styled-components, addressing TODO comments, etc.