{"id":25609536,"url":"https://github.com/aws-samples/draw-an-app","last_synced_at":"2025-10-12T22:37:37.363Z","repository":{"id":277020827,"uuid":"926383041","full_name":"aws-samples/draw-an-app","owner":"aws-samples","description":"This project uses AWS Bedrock's Claude 3 Sonnet model to convert hand-drawn UI sketches into working web applications.","archived":false,"fork":false,"pushed_at":"2025-06-15T03:56:32.000Z","size":2000,"stargazers_count":4,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-06T21:09:01.685Z","etag":null,"topics":["aws","bedrock","claude-3-5-sonnet","generative-ai","nextjs"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit-0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aws-samples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-03T06:32:55.000Z","updated_at":"2025-06-15T07:33:14.000Z","dependencies_parsed_at":"2025-02-11T18:40:22.773Z","dependency_job_id":null,"html_url":"https://github.com/aws-samples/draw-an-app","commit_stats":null,"previous_names":["aws-samples/draw-an-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aws-samples/draw-an-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-samples%2Fdraw-an-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-samples%2Fdraw-an-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-samples%2Fdraw-an-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-samples%2Fdraw-an-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aws-samples","download_url":"https://codeload.github.com/aws-samples/draw-an-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-samples%2Fdraw-an-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279013277,"owners_count":26085250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","bedrock","claude-3-5-sonnet","generative-ai","nextjs"],"created_at":"2025-02-21T21:40:10.733Z","updated_at":"2025-10-12T22:37:37.343Z","avatar_url":"https://github.com/aws-samples.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Draw-an-App - Sketch to Reality\n\nThis project uses AWS Bedrock's Claude 3 Sonnet model to convert hand-drawn UI sketches into working web applications. It supports two modes of operation:\n1. Real-time webcam capture for immediate sketching and conversion\n2. Image upload through a user-friendly Streamlit interface\n\n## Prerequisites\n\n### Node.js Setup\n- Node.js 18.x or higher\n  \n#### Windows Installation\n1. Download the Node.js installer from [official website](https://nodejs.org/)\n2. Run the installer (.msi file)\n3. Follow the installation wizard\n4. Verify installation:\n```cmd\nnode --version\nnpm --version\n```\n\n#### macOS/Linux Installation\nUsing package manager:\n```bash\n# For macOS (using Homebrew)\nbrew install node\n\n# For Ubuntu/Debian\ncurl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -\nsudo apt-get install -y nodejs\n\n# For other Linux distributions, check your package manager\n```\n\n### Python Setup\n- Python 3.8 or higher\n- Webcam (for webcam-based flow)\n- AWS Account with Bedrock access\n- Access to Claude 3 Sonnet model in AWS Bedrock\n- Git\n\n#### Windows Installation\n1. Download Python installer from [python.org](https://www.python.org/downloads/)\n2. Run the installer\n3. **Important**: Check \"Add Python to PATH\" during installation\n4. Verify installation:\n```cmd\npython --version\npip --version\n```\n\n#### macOS/Linux Installation\n```bash\n# macOS (using Homebrew)\nbrew install python\n\n# Ubuntu/Debian\nsudo apt-get update\nsudo apt-get install python3 python3-pip\n\n# Verify installation\npython3 --version\npip3 --version\n```\n\n## Architecture\n\n![Architecture Diagram](draw-an-app.drawio.png)\n\nThe system follows this flow:\n\n1. **Image Input**: The application supports two methods:\n   - OpenCV webcam capture for real-time sketching\n   - Streamlit-based image upload interface\n\n2. **Image Processing**: The captured/uploaded image is processed and converted to a format suitable for analysis.\n\n3. **Claude 3 Integration**: The processed image is sent to AWS Bedrock's Claude 3 Sonnet model along with carefully crafted prompts that guide the model to:\n   - Analyze and understand the UI elements in the sketch\n   - Generate appropriate Next.js components and code\n   - Ensure the generated code follows best practices\n\n4. **Code Generation**: Claude 3 generates the necessary Next.js components, styles, and functionality based on the sketch.\n\n5. **Application Update**: The system automatically:\n   - Updates the Next.js application files\n   - Applies any necessary styling\n   - Implements required functionality\n   - Hot-reloads the development server\n\n6. **Live Preview**: The changes are immediately visible in the running Next.js application, providing instant feedback on the generated code.\n\n7. **Future Updates**: The developers can use the Amazon Q for Developer for future updates to the generated code.\n\n## Environment Setup\n\n1. Clone the repository:\n```bash\ngit clone \u003crepository-url\u003e\ncd draw-an-app\n```\n\n2. Create and activate a virtual environment:\n\nWindows:\n```cmd\npython -m venv venv\n.\\venv\\Scripts\\activate\n```\n\nmacOS/Linux:\n```bash\npython3 -m venv venv\nsource venv/bin/activate\n```\n\n3. Install required Python packages:\n\nWindows:\n```cmd\npip install -r src\\requirements.txt\n```\n\nmacOS/Linux:\n```bash\npip install -r src/requirements.txt\n```\n\n4. Install Node.js dependencies:\n\nWindows/macOS/Linux:\n```bash\ncd blank-nextjs-app\nnpm install\ncd ..\n```\n\n## AWS Bedrock Configuration\n\n1. Configure AWS credentials:\n\nWindows (PowerShell):\n```powershell\n$env:AWS_ACCESS_KEY_ID=\"your_access_key\"\n$env:AWS_SECRET_ACCESS_KEY=\"your_secret_key\"\n$env:AWS_DEFAULT_REGION=\"us-west-2\"  # or your preferred region\n```\n\nmacOS/Linux:\n```bash\nexport AWS_ACCESS_KEY_ID=your_access_key\nexport AWS_SECRET_ACCESS_KEY=your_secret_key\nexport AWS_DEFAULT_REGION=us-west-2  # or your preferred region\n```\n\nAlternatively, you can configure AWS credentials using the AWS CLI:\n```bash\naws configure\n```\n\n2. Verify Bedrock Access:\n- Ensure you have access to the Claude 3 Sonnet model in AWS Bedrock\n- Verify your AWS account has the necessary permissions to invoke the Bedrock runtime\n\n## System Check\n\nBefore running the application, verify:\n\n1. Your webcam is properly connected and accessible (if using webcam flow)\n2. You have access to AWS Bedrock's Claude 3 Sonnet model\n3. AWS credentials are properly configured\n\n## Usage\n\n### Method 1: Webcam-based Flow\n\n1. Start the Next.js development server:\n\nWindows/macOS/Linux:\n```bash\ncd blank-nextjs-app\nnpm install\nnpm run dev\n```\nKeep this server running to view your generated applications at http://localhost:3000\n\n2. In a new terminal, run the webcam-based application:\n\nWindows:\n```cmd\n# Make sure you're in the project root directory and venv is activated\npython src\\main_v2.py\n```\n\nmacOS/Linux:\n```bash\n# Make sure you're in the project root directory and venv is activated\npython src/main_v2.py\n```\n\n3. When the webcam window opens:\n   - Press SPACE to capture and process an image\n   - Press Q to quit the application\n\n### Method 2: Streamlit Interface\n\n1. Start the Next.js development server (if not already running):\n```bash\ncd blank-nextjs-app\nnpm install\nnpm run dev\n```\n\n2. In a new terminal, launch the Streamlit interface:\n\nWindows:\n```cmd\n# Make sure you're in the project root directory and venv is activated\nstreamlit run src\\main_streamlit.py\n```\n\nmacOS/Linux:\n```bash\n# Make sure you're in the project root directory and venv is activated\nstreamlit run src/main_streamlit.py\n```\n\n3. Using the Streamlit interface:\n   - Upload your UI sketch image (supported formats: JPG, JPEG)\n   - Click \"Generate App\" to process the image\n   - The interface will show both original and processed images\n   - Progress indicators will keep you informed of the generation process\n   - View the generated application at http://localhost:3000\n\n## Project Structure\n\n```\ndraw-an-app/\n├── src/                    # Source code directory\n│   ├── main_v2.py         # Webcam-based application\n│   ├── main_streamlit.py  # Streamlit-based application\n│   └── utils/             # Utility modules\n│       ├── aws_utils.py   # AWS-related utilities\n│       ├── camera_utils.py # Camera handling utilities\n│       ├── image_utils.py # Image processing utilities\n│       └── project_utils.py # Project-specific utilities\n│   ├── prompt_system.txt      # System prompt for Claude\n│   ├── prompt_assistant.txt   # Assistant prompt for Claude\n│   ├── requirements.txt       # Python dependencies\n├── nextjs-app-template/   # Template for generated web applications\n└── blank-nextjs-app/     # Working directory for generated applications\n```\n\n## Troubleshooting\n\n1. Node.js Issues:\n   - Verify Node.js installation: `node --version`\n   - Clear npm cache: `npm cache clean --force`\n   - Delete node_modules and reinstall: `rm -rf node_modules \u0026\u0026 npm install`\n\n2. Webcam Issues (for webcam-based flow):\n   - Ensure your webcam is properly connected\n   - Check if other applications are using the webcam\n   - Try different camera indices if multiple cameras are present\n\n3. AWS Bedrock Access:\n   - Verify AWS credentials are correctly set\n   - Ensure you have access to the Claude 3 Sonnet model\n   - Check AWS region configuration\n\n4. Python Environment:\n   - Ensure virtual environment is activated\n   - Verify all dependencies are installed correctly\n   - Check Python version compatibility\n\n5. Streamlit Interface Issues:\n   - Ensure Streamlit is installed correctly (`pip install streamlit`)\n   - Check if the uploaded image is in a supported format\n   - Verify the image file size is not too large\n\n## License\n\nThis code sample is licensed under the MIT-0 License. See the LICENSE file.\n\n- [Changelog](CHANGELOG.md) of the project.\n- [License](LICENSE) of the project.\n- [Code of Conduct](CODE_OF_CONDUCT.md) of the project.\n- [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more information.\n\n## Authors\n- [Vikram Shitole](https://www.linkedin.com/in/vikram-aws/)\n- [SureshKumar K V](https://www.linkedin.com/in/sureshkumarkv-in/)\n\n## ⚠️ Precautions ⚠️\nBefore you begin using the solution, there are certain precautions you must take into account:\n\n- Cost Management with Bedrock: Be mindful of the costs associated with AWS resources.\n\n- This is a sample: the code provided in this repository shouldn't be used for production workloads without further reviews and adaptation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faws-samples%2Fdraw-an-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faws-samples%2Fdraw-an-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faws-samples%2Fdraw-an-app/lists"}