Skip to content

A Swift application that can provide code for any* UI Element using a rough sketch🚀.

License

Notifications You must be signed in to change notification settings

MLH-Fellowship/pod-3.1.0-Sketch2Code

Repository files navigation

S2C

Forks Stars Watchers Issues PRs MIT License Top Language Languages activity contributors size lines Maintenance Badge badge Badge badge

Sketch2Code🚀

Sketch-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 & 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).

Inspiration❤️

Our core mission is to increase the efficiency of the typical App development workflow & removing the redundant & time-consuming bits from the process by providing an easily accessible & 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.

When 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.

We 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.

Architecture

The Sketch2Code solution uses the following elements:

Screenshot 2021-08-12 at 4 12 58 PM

How to run ?⚙️

  • Clone or download the app from this repository. 👩‍💻
  • Open project file in terminal. 💻
  • Open Swift Co-Pilot.xcodeproj in the app folder. 💾
  • Change the bundle identifier. ⚙️
  • Press Ctrl + R to run the app. 📲
  • Do star this repo and/or contribute if you like it.🙂

How to Generate Code ?

In total we have 2 types of code generators:

Sketch 2 Code✏️

Rigt now we have two type of Sketch 2 Code conversion:

1. Single Element Detecion

  • In this we have concentrated on single UIElement detection. There are times when developers need code of a specific type of UIElement.
  • So in such cases users can go on with using the Single Element Detection.

Rules

  • While using this feature developer need to provide the name of the element above and its shape.
  • Providing name is really important
  • And for elements like Buttons, TextFields user need to provide its shape too.

Quick Demo

Screenshot 2021-08-12 at 4 12 58 PM

Make sure you spell the element type correctly🪄

2. UI Screen Detection

  • As the project tite suggests our prior motve was to ease the work of coding UI stuffs.
  • If you want to get code of a particular UI screen then you can use this feature.

Quick Demo

Screenshot 2021-08-12 at 4 12 48 PM Screenshot 2021-08-12 at 4 15 22 PM

Make sure you draw a rectangle box and add your UIElements inside it.

Make sure you spell the element type correctly🪄.

You need to follow the naming type as given above.

Text 2 Code 💬

  • Text 2 Code is an additional feature which we have added for people who are not good in sketching😅.
  • 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.
  • While writing the text you need to follow a set of order, which will be provided automatically by the App.

Snapshots of App 📸

Features ⚡️

  • Sketch to Code provides code snippet for UIElements in Swift & SwiftUI.
  • Text to Code generates code snippet based on text provided.
  • Save Snippet saves code snippets to our backend.

Sponsor Technology

  • We used domain.com to create and launch server with the codebase we have right now.
  • Cockroach DB was used for storing and retrieving information in real-time.

Screenshot 2021-08-13 at 7 20 01 PM Screenshot 2021-08-13 at 3 26 21 PM

Tech Stacks 🖥

Tech Stacks Logo
Xcode Xcode
Swift Swift
IBM Annotations IBM
CreateML CreateML
Python Python
Tech Stacks Logo
PyCharm PyCharm
HTML html
Heroku Heroku
CockroachDB CockroachLabs
Postman Postman

Libraries📒

What's next? 📱

With the upcoming releases we have thought of bringing various new features like:

I. Multiple Coding Language Support

II. Add more UIElements

III. Adding enhanced NLP in Text2Code, to make it more versatile

IV. Make object detection more enhanced

V. Release Sketch2Code as a Beta release to know user feedback

Warnings ⚠️

  • 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.
  • When we say provide Sketch and Text you do need to follow a few practices with your inputs to use S2C.
  • Right now S2C is limited to Swift language, in future we tend to make it available for other programming languages too.
  • With upcoming versions we focus on making S2C more powerful and more versatile

Requirements to Run 🚩

  • Xcode 12+
  • Swift 5+
  • For the server backend: Python 3.8.5 (with the requirements.txt installation)

MLH Pre-Fellowship( Summer 2021)

This is a hackathon project made by MLH Fellows - Pod 3.1.0 i.e. Recursive Rhinos - Team 4

Screenshot 2021-08-12 at 3 51 30 PM

Project Maintainers 👨🏻‍💻

Alex Gokul Nair Prabaljit Walia

Team

GitHub Usernames Domain
@gokulNair iOS App + Documentation
@prabaljitWalia iOS App + Documentation
@Alex Backend
  • Feel free to contribute 💪🏼

Made with ❤️ By Developers

About

A Swift application that can provide code for any* UI Element using a rough sketch🚀.

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages