{"id":23135445,"url":"https://github.com/mlh-fellowship/pod-3.1.0-sketch2code","last_synced_at":"2025-08-17T10:31:29.340Z","repository":{"id":47773666,"uuid":"390683066","full_name":"MLH-Fellowship/pod-3.1.0-Sketch2Code","owner":"MLH-Fellowship","description":"A Swift application that can provide code for any* UI Element using a rough sketch🚀.","archived":false,"fork":false,"pushed_at":"2021-08-13T14:46:16.000Z","size":45060,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-05-01T17:21:28.327Z","etag":null,"topics":["coreml","html","python","sketch-to-code","sketch2code","sketchcodes","swift","swiftui"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MLH-Fellowship.png","metadata":{"files":{"readme":"README.md","changelog":"history_actions.py","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-29T10:14:22.000Z","updated_at":"2023-07-29T18:20:46.000Z","dependencies_parsed_at":"2022-08-28T09:02:23.141Z","dependency_job_id":null,"html_url":"https://github.com/MLH-Fellowship/pod-3.1.0-Sketch2Code","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLH-Fellowship%2Fpod-3.1.0-Sketch2Code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLH-Fellowship%2Fpod-3.1.0-Sketch2Code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLH-Fellowship%2Fpod-3.1.0-Sketch2Code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLH-Fellowship%2Fpod-3.1.0-Sketch2Code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MLH-Fellowship","download_url":"https://codeload.github.com/MLH-Fellowship/pod-3.1.0-Sketch2Code/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230113644,"owners_count":18175221,"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","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":["coreml","html","python","sketch-to-code","sketch2code","sketchcodes","swift","swiftui"],"created_at":"2024-12-17T12:15:24.602Z","updated_at":"2024-12-17T12:15:25.404Z","avatar_url":"https://github.com/MLH-Fellowship.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\" width=\"100%\"\u003e\n \n \u003cimg width=\"800\" alt=\"S2C\" src=\"https://user-images.githubusercontent.com/56252259/129200700-7dc994cb-7503-456a-a8cf-ad7a9abfb02f.png\"\u003e \n\n\u003c/p\u003e\n\n![Forks](https://img.shields.io/github/forks/MLH-Fellowship/pod-3.1.0-Sketch2Code?style=social)\n![Stars](https://img.shields.io/github/stars/MLH-Fellowship/pod-3.1.0-Sketch2Code?style=social) \n![Watchers](https://img.shields.io/github/watchers/MLH-Fellowship/pod-3.1.0-Sketch2Code?style=social) \n![Issues](https://img.shields.io/github/issues/MLH-Fellowship/pod-3.1.0-Sketch2Code) \n![PRs](https://img.shields.io/github/issues-pr-raw/MLH-Fellowship/pod-3.1.0-Sketch2Code) \n![MIT License](https://img.shields.io/github/license/MLH-Fellowship/pod-3.1.0-Sketch2Code) \n![Top Language](https://img.shields.io/github/languages/top/pod-3.1.0-Sketch2Code/FellowStories) \n![Languages](https://img.shields.io/github/languages/count/MLH-Fellowship/pod-3.1.0-Sketch2Code)\n![activity](https://img.shields.io/github/commit-activity/m/MLH-Fellowship/FellowStories) \n![contributors](https://img.shields.io/github/contributors-anon/MLH-Fellowship/pod-3.1.0-Sketch2Code)\n![size](https://img.shields.io/github/languages/code-size/MLH-Fellowship/pod-3.1.0-Sketch2Code)\n![lines](https://img.shields.io/tokei/lines/github/MLH-Fellowship/pod-3.1.0-Sketch2Code)\n[![Maintenance](https://img.shields.io/maintenance/yes/2021?color=green\u0026logo=github)](https://github.com/MLH-Fellowship/pod-3.1.0-Sketch2Code)\n![Badge](https://img.shields.io/badge/Xcode-12.0-green)\n![badge](https://img.shields.io/badge/Swift-5.1-red)\n![Badge](https://img.shields.io/badge/Python-3.9-brown)\n![badge](https://img.shields.io/badge/Core-ML-yellow)\n\n# Sketch2Code🚀\nSketch-2-Code is a project which focuses on making coding easier and simpler. When it comes to coding in Swift, if we have any* doubts we refer to tutorials, blogs, etc, that was the usual way, But no more old procedures. Sketch-2-Code is the new \u0026 faster method to find help. Provide your UI Sketch or Text down your requirements and get instant output snippets with ready-to-use implementations of UIElements by S2C(Sketch 2 Code).\n\n# Inspiration❤️\n\nOur core mission is to increase the efficiency of the typical App development workflow \u0026 removing the redundant \u0026 time-consuming bits from the process by providing an easily accessible \u0026 automated solution where user can just provide a Sketch of UI and code will be autogenerated. This is how Sketch 2 Code came into existence. \n\nWhen we thought of something like this we were clueless on how to start and build this product. But later with the flow we tried various techniques, various languages and got one which would suit our requirements. Eventually with time we made the normal procedure more easy and user friendly to developers by integrating Machine Learning models into S2C. \n\nWe also realised that it wasn't convenient for all to draw a Sketch of UI and hence also added another feature called Text 2 Code which is an even easier way where user can just type-in their requirements and the code wil be generated.\n\n# Architecture\nThe Sketch2Code solution uses the following elements:\n\n\u003cp align=\"center\" width=\"100%\"\u003e\n \n\u003cimg width=\"800\" alt=\"Screenshot 2021-08-12 at 4 12 58 PM\" src=\"https://user-images.githubusercontent.com/56252259/129193965-49ad8078-8976-442d-a3cd-e505724210d8.png\"\u003e \n\n\u003c/p\u003e\n\n# How to run ?⚙️\n\n* Clone or download the app from this repository. 👩‍💻\n* Open project file in terminal. 💻\n* Open ```Swift Co-Pilot.xcodeproj``` in the app folder. 💾\n* Change the bundle identifier. ⚙️\n* Press Ctrl + R to run the app. 📲\n* Do star this repo and/or contribute if you like it.🙂 \n\n# How to Generate Code ?\nIn total we have 2 types of code generators:\n\n## Sketch 2 Code✏️\nRigt now we have two type of Sketch 2 Code conversion:\n\n### 1. Single Element Detecion\n\n- In this we have concentrated on single UIElement detection. There are times when developers need code of a specific type of UIElement.\n- So in such cases users can go on with using the Single Element Detection.\n\n#### Rules\n- While using this feature developer need to provide the name of the element above and its shape.\n- Providing name is really important\n- And for elements like Buttons, TextFields user need to provide its shape too.\n\n\u003c!-- #### Elements which can be detected\n| Elements  | Sketch |\n| -- | -- |\n| Buttons | ✅ |\n| TextFields | ✅ |\n| TextView | ✅ |\n| Segment Control | ❌ |\n| Labels | ❌ |\n| Switches | ❌ | --\u003e\n\n### Quick Demo\n\n\u003cp align=\"center\" width=\"100%\"\u003e\n \n\u003cimg width=\"400\" alt=\"Screenshot 2021-08-12 at 4 12 58 PM\" src=\"https://user-images.githubusercontent.com/56252259/129183908-d19ece27-27f3-41d0-98f5-25aa8ea90350.png\"\u003e\n\n \u003c/p\u003e\n \nMake sure you spell the element type correctly🪄\n\n### 2. UI Screen Detection\n\n- As the project tite suggests our prior motve was to ease the work of coding UI stuffs.\n- If you want to get code of a particular UI screen then you can use this feature.\n\n\u003c!--#### Elements which can be detected\n1. ImageView(I)\n2. Buttons(BUTTONS)\n3. TextField(TF)--\u003e\n\n### Quick Demo\n\n\u003cimg width=\"400\" height = \"600\" alt=\"Screenshot 2021-08-12 at 4 12 48 PM\" src=\"https://user-images.githubusercontent.com/56252259/129183943-449e816e-d150-4f9e-b53d-97422cdce342.png\"\u003e \u003cimg width=\"400\" height = \"600\" alt=\"Screenshot 2021-08-12 at 4 15 22 PM\" src=\"https://user-images.githubusercontent.com/56252259/129184212-4ca9c45c-74de-40f9-8210-8115512d4d44.png\"\u003e\n\nMake sure you draw a rectangle box and add your UIElements inside it.\n\nMake sure you spell the element type correctly🪄. \n\nYou need to follow the naming type as given above.\n\n## Text 2 Code 💬\n- Text 2 Code is an additional feature which we have added for people who are not good in sketching😅. \n- Using Text 2 Code is really easy and simple, just start writing the element type and the suggestion box in the app will show you the order of writing.\n- While writing the text you need to follow a set of order, which will be provided automatically by the App.\n\n\u003c!--#### Elements which can be detected\n1. Buttons\n2. Labels--\u003e\n\n# Snapshots of App 📸\n\u003cp align = \"centre\"\u003e\u003cimg src = \"assets/home_iphone12prographite_portrait.png\" width = \"20%\" height = \"20%\"\u003e\n\u003cimg src = \"assets/home2_iphone12prographite_portrait.png\" width = \"20%\" height = \"20%\"\u003e\n\u003cimg src = \"https://user-images.githubusercontent.com/56252259/129339728-12cc9f07-28b1-4761-a27c-547fc0dea182.png\" width = \"20%\" height = \"20%\"\u003e\n\u003cimg src = \"https://user-images.githubusercontent.com/60341847/129336198-b4d13927-1ba7-4cf2-8411-fdf643b62861.png\" width = \"20%\" height = \"20%\"\u003e\n\u003cimg src = \"assets/historyCodeDetail_iphone12prographite_portrait.png\" width = \"20%\" height = \"20%\"\u003e\n\u003cimg src = \"assets/text2code_iphone12prographite_portrait.png\" width = \"20%\" height = \"20%\"\u003e \n\u003cimg src = \"https://user-images.githubusercontent.com/56252259/129338734-d4ceabd7-b27b-4579-a227-6b0c9ea29d97.png\" width = \"20%\" height = \"20%\"\u003e \n\u003cimg src = \"https://user-images.githubusercontent.com/56252259/129338496-a58fa612-0fb3-4e81-9718-2f0892d9918d.png\" width = \"20%\" height = \"20%\"\u003e\n\n\n# Features ⚡️\n- ```Sketch to Code``` provides code snippet for UIElements in Swift \u0026 SwiftUI.\n- ```Text to Code``` generates code snippet based on text provided.\n- ```Save Snippet``` saves code snippets to our backend.\n\n# Sponsor Technology\n\n- We used **domain.com** to create and launch server with the codebase we have right now. \n- **Cockroach DB** was used for storing and retrieving information in real-time.\n \n\u003cimg width=\"250\" alt=\"Screenshot 2021-08-13 at 7 20 01 PM\" src=\"https://user-images.githubusercontent.com/56252259/129367211-61c2343c-bfc8-4101-9eec-13b1ae8477e4.png\"\u003e \u003cimg width=\"250\" alt=\"Screenshot 2021-08-13 at 3 26 21 PM\" src=\"https://user-images.githubusercontent.com/56252259/129366845-8c506b0b-64fc-4e57-bfbb-025fd3225846.png\"\u003e\n\n\n# Tech Stacks 🖥\n\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e\n\n| Tech Stacks | Logo |\n| -- | -- |\n| Xcode | ![Xcode](https://img.shields.io/badge/Xcode-007ACC?style=for-the-badge\u0026logo=Xcode\u0026logoColor=white) |\n| Swift | ![Swift](https://img.shields.io/badge/swift-%23FA7343.svg?style=for-the-badge\u0026logo=swift\u0026logoColor=white) |\n| IBM Annotations| \u003cimg width=\"70\" height = \"30\" alt=\"IBM\" src=\"https://user-images.githubusercontent.com/56252259/128967971-8f6d853c-d56f-459d-8707-ee8ec89c9014.png\"\u003e |\n| CreateML| \u003cimg width=\"70\" height = \"30\" alt=\"CreateML\" src=\"https://user-images.githubusercontent.com/56252259/128967854-50a9455c-b9e5-44bf-beda-2d6d2f57a7f9.png\"\u003e |\n| Python | ![Python](https://img.shields.io/badge/python-%2314354C.svg?style=for-the-badge\u0026logo=python\u0026logoColor=white) |\n\n \u003c/td\u003e\u003ctd\u003e \n \n| Tech Stacks | Logo |\n| -- | -- | \n| PyCharm | ![PyCharm](https://img.shields.io/badge/pycharm-143?style=for-the-badge\u0026logo=pycharm\u0026logoColor=black\u0026color=black\u0026labelColor=green) |\n| HTML | ![html](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white) |\n| Heroku | ![Heroku](https://img.shields.io/badge/heroku-%23430098.svg?style=for-the-badge\u0026logo=heroku\u0026logoColor=white) |\n| CockroachDB | ![CockroachLabs](https://img.shields.io/badge/Cockroach%20Labs-6933FF?style=for-the-badge\u0026logo=Cockroach%20Labs\u0026logoColor=white) |\n| Postman| ![Postman](https://img.shields.io/badge/Postman-FF6C37?style=for-the-badge\u0026logo=postman\u0026logoColor=red) |\n \n\u003c/td\u003e\u003c/tr\u003e \u003c/table\u003e\n \n# Libraries📒\n- UIKit\n- SwiftUI\n- VisionKit\n- CoreML\n- ImageIO\n- [Loafjet](https://github.com/Loafjet/Loafjet)\n- [Alamofire](https://github.com/Alamofire/Alamofire)\n\n# What's next? 📱\n\nWith the upcoming releases we have thought of bringing various new features like:\n\nI.   Multiple Coding Language Support\n\nII.  Add more UIElements\n\nIII. Adding enhanced NLP in Text2Code, to make it more versatile\n\nIV.  Make object detection more enhanced\n\nV.   Release Sketch2Code as a Beta release to know user feedback\n\n# Warnings ⚠️\n- Right now S2C is not powerful enough to support all the UIElements that come with Xcode but, we are working on a top-down approach of covering the most used UIElements with the best possible accuracy.\n- When we say provide Sketch and Text you do need to follow a few practices with your inputs to use S2C.\n- Right now S2C is limited to Swift language, in future we tend to make it available for other programming languages too.\n- With upcoming versions we focus on making S2C more powerful and more versatile\n\n## Requirements to Run 🚩\n- Xcode 12+\n- Swift 5+\n- For the server backend: Python 3.8.5 (with the requirements.txt installation)\n\n\n## MLH Pre-Fellowship( Summer 2021)\n\n\u003e This is a hackathon project made by MLH Fellows - Pod 3.1.0 i.e. Recursive Rhinos - Team 4\n\u003cimg width=\"1180\" alt=\"Screenshot 2021-08-12 at 3 51 30 PM\" src=\"https://user-images.githubusercontent.com/56252259/129181301-b8ed8da0-e6b4-4147-a2ee-ba4aeeddde7d.png\"\u003e\n\n# Project Maintainers 👨🏻‍💻\n\n|                                                                                         \u003ca href=\"https://github.com\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/56252259/128824753-e1a60390-c0be-449f-ac89-62e6c016a11a.png\" width=150px height=160px /\u003e\u003c/a\u003e                                                                                         | \u003ca href=\"https://gokulnair2001.wixsite.com/mysite\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/56252259/115108512-83c79680-9f8e-11eb-837c-b0cf9a20560c.png\" width=150px height=160px /\u003e\u003c/a\u003e    | \u003ca href=\"https://github.com/prabal4546\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/56252259/115042145-d488b200-9ef0-11eb-922e-1dfc389db3e6.jpeg\" width=150px height=160px /\u003e\u003c/a\u003e|\n| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|\n|                                                                                                                                        **[Alex](https://github.com/amin-codes)**                                                                                                                                        |**[Gokul Nair](https://www.linkedin.com/in/gokul-r-nair/)**            | **[Prabaljit Walia](https://www.linkedin.com/in/prabaljit-walia-5800571a0/)**            |\n| \u003cimg src=\"https://user-images.githubusercontent.com/56252259/114969025-24d22680-9e95-11eb-848d-b20e73269c4c.png\" width=\"32px\" height=\"32px\"\u003e\u003c/a\u003e \u003cimg src=\"https://user-images.githubusercontent.com/56252259/114967867-d6bc2380-9e92-11eb-8f89-c437f39a45de.png\" width=\"32px\" height=\"32px\"\u003e\u003c/a\u003e  \u003cimg src=\"https://user-images.githubusercontent.com/56252259/114967871-d7ed5080-9e92-11eb-8781-cd7cf9bb52db.png\" width=\"32px\" height=\"32px\"\u003e\u003c/a\u003e | \u003ca href=\"https://www.instagram.com/_gokul_r_nair_/\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/56252259/114969025-24d22680-9e95-11eb-848d-b20e73269c4c.png\" width=\"32px\" height=\"32px\"\u003e\u003c/a\u003e \u003ca href=\"https://twitter.com/itIsGokulNair\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/56252259/114967867-d6bc2380-9e92-11eb-8f89-c437f39a45de.png\" width=\"32px\" height=\"32px\"\u003e\u003c/a\u003e  \u003ca href=\"https://www.linkedin.com/in/gokul-r-nair/\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/56252259/114967871-d7ed5080-9e92-11eb-8781-cd7cf9bb52db.png\" width=\"32px\" height=\"32px\"\u003e\u003c/a\u003e |\u003ca href=\"https://instagram.com/prabal4546?igshid=hq0bl8q25kur\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/56252259/114969025-24d22680-9e95-11eb-848d-b20e73269c4c.png\" width=\"32px\" height=\"32px\"\u003e\u003c/a\u003e \u003ca href=\"https://twitter.com/PrabaljitW\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/56252259/114967867-d6bc2380-9e92-11eb-8f89-c437f39a45de.png\" width=\"32px\" height=\"32px\"\u003e\u003c/a\u003e  \u003ca href=\"https://www.linkedin.com/in/prabaljit-walia-5800571a0/\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/56252259/114967871-d7ed5080-9e92-11eb-8781-cd7cf9bb52db.png\" width=\"32px\" height=\"32px\"\u003e\u003c/a\u003e |\n\n## Team\n| GitHub Usernames                                      | Domain                     |\n| ----------------------------------------------------- | -------------------------- |\n| [@gokulNair](https://github.com/gokulnair2001)      | iOS App  + Documentation |\n| [@prabaljitWalia](https://github.com/prabal4546)        |  iOS App + Documentation |\n| [@Alex](https://github.com/amin-codes) | Backend |\n\n- Feel free to contribute 💪🏼 \n\n\u003cp align=\"center\" width=\"100%\"\u003e\n   Made with ❤️ By Developers   \n\u003c/p\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlh-fellowship%2Fpod-3.1.0-sketch2code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlh-fellowship%2Fpod-3.1.0-sketch2code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlh-fellowship%2Fpod-3.1.0-sketch2code/lists"}