├── data ├── requirements.txt ├── img.jpg ├── sample.png ├── 1691950689617.jpg ├── README.md ├── ocr.py ├── LICENSE ├── app.py └── .gitignore /data: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AIAnytime/Design-to-Website-App-using-Generative-AI/main/img.jpg -------------------------------------------------------------------------------- /sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AIAnytime/Design-to-Website-App-using-Generative-AI/main/sample.png -------------------------------------------------------------------------------- /1691950689617.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AIAnytime/Design-to-Website-App-using-Generative-AI/main/1691950689617.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Design-to-Website-App-using-Generative-AI 2 | Design to Website App using Generative AI. It is a streamlit application that uses OCR and LLM to generate code/website from design. 3 | -------------------------------------------------------------------------------- /ocr.py: -------------------------------------------------------------------------------- 1 | import easyocr 2 | 3 | class OCRProcessor: 4 | def __init__(self): 5 | self.reader = easyocr.Reader(['en']) 6 | 7 | def extract_layout(self, img): 8 | result = self.reader.readtext(img) 9 | 10 | output_list = [] 11 | 12 | for original_list, key, _ in result: 13 | values = [coord for sublist in original_list for coord in sublist] 14 | formatted_dict = {key: values} 15 | output_list.append(formatted_dict) 16 | 17 | return output_list 18 | 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 AI Anytime 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /app.py: -------------------------------------------------------------------------------- 1 | from ocr import OCRProcessor 2 | import streamlit as st 3 | from langchain.prompts import PromptTemplate 4 | from langchain.chat_models import ChatOpenAI 5 | from langchain.chains import LLMChain 6 | import streamlit.components.v1 as components 7 | from PIL import Image 8 | import os 9 | 10 | os.environ["OPENAI_API_KEY"] = "" 11 | 12 | def ocr_func(img): 13 | ocr_processor = OCRProcessor() 14 | # Replace 'your_image.jpg' with the actual image file path 15 | image_path = img 16 | layout = ocr_processor.extract_layout(image_path) 17 | return layout 18 | 19 | image_sample = "img.jpg" 20 | 21 | custom_prompt_template = """This is a layout of a handwriting website design, including text and their coordinates of four outer vertices. 22 | Make an HTML modern sans-serif website that reflects these elements and decide which 23 | CSS can be used to match their relative positions, try to use proper layout tags to match 24 | their font size and relative placement based on their coordinates. 25 | Use