From 62272e3a68361222e1f5da948f6ff5be7deeeee3 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Tue, 19 Mar 2024 13:51:30 -0400 Subject: [PATCH 01/11] update error message for video --- backend/routes/generate_code.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/routes/generate_code.py b/backend/routes/generate_code.py index 2d82aca..b2e55cc 100644 --- a/backend/routes/generate_code.py +++ b/backend/routes/generate_code.py @@ -230,7 +230,7 @@ async def stream_code(websocket: WebSocket): if validated_input_mode == "video": if not ANTHROPIC_API_KEY: await throw_error( - "No Anthropic API key found. Please add the environment variable ANTHROPIC_API_KEY to backend/.env" + "Video only works with Anthropic models. No Anthropic API key found. Please add the environment variable ANTHROPIC_API_KEY to backend/.env" ) raise Exception("No Anthropic key") From 7f44228a9582f6e39e8dbcee7598b86328ef7e74 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Tue, 19 Mar 2024 13:57:57 -0400 Subject: [PATCH 02/11] fix bug where open AI key is required to use it with Anthropic --- backend/routes/generate_code.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/routes/generate_code.py b/backend/routes/generate_code.py index b2e55cc..d9ea660 100644 --- a/backend/routes/generate_code.py +++ b/backend/routes/generate_code.py @@ -119,7 +119,7 @@ async def stream_code(websocket: WebSocket): if openai_api_key: print("Using OpenAI API key from environment variable") - if not openai_api_key: + if not openai_api_key and code_generation_model == "gpt_4_vision": print("OpenAI API key not found") await websocket.send_json( { From 6069c2a118592905fd8c0bc2b406b2e93891dfb1 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Wed, 20 Mar 2024 15:54:42 -0400 Subject: [PATCH 03/11] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f8b6795..b1dc247 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ For debugging purposes, if you don't want to waste GPT4-Vision credits, you can MOCK=true poetry run uvicorn main:app --reload --port 7001 ``` -## Video to app (experimental) +## Screen Recording to prototype (experimental) https://github.com/abi/screenshot-to-code/assets/23818/1468bef4-164f-4046-a6c8-4cfc40a5cdff From 6a0201a5c0916ad089c7555c019be5427fe01f36 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Fri, 22 Mar 2024 11:14:15 -0400 Subject: [PATCH 04/11] fix up mock data --- backend/mock_llm.py | 754 ++++++++++++++++++++++++-------------------- 1 file changed, 410 insertions(+), 344 deletions(-) diff --git a/backend/mock_llm.py b/backend/mock_llm.py index 0b903b7..b85b1b1 100644 --- a/backend/mock_llm.py +++ b/backend/mock_llm.py @@ -4,14 +4,14 @@ from typing import Awaitable, Callable from custom_types import InputMode -STREAM_CHUNK_SIZE = 5 +STREAM_CHUNK_SIZE = 20 async def mock_completion( process_chunk: Callable[[str], Awaitable[None]], input_mode: InputMode ) -> str: code_to_return = ( - GOOGLE_FORM_VIDEO_PROMPT_MOCK + TALLY_FORM_VIDEO_PROMPT_MOCK if input_mode == "video" else NO_IMAGES_NYTIMES_MOCK_CODE ) @@ -670,394 +670,460 @@ $(document).ready(function() { """ GOOGLE_FORM_VIDEO_PROMPT_MOCK = """ - -To build this: -- Create a search bar that allows typing and shows placeholder text -- Implement search suggestions that update as the user types -- Allow selecting a suggestion to perform that search -- Show search results with the query and an AI-powered overview -- Have filter tabs for different search verticals -- Allow clicking filter tabs to add/remove them, updating the URL -- Ensure the UI closely matches the Google style and colors + +User flow: +1. User starts on the Google search page and types in "times" in the search bar +2. As the user types, Google provides autocomplete suggestions related to "times" +3. User selects the "times" suggestion from the autocomplete dropdown +4. The search results page for "times" loads, showing various results related to The New York Times newspaper +5. User clicks the "Generate" button under "Get an AI-powered overview for this search?" +6. An AI-generated overview about The New York Times loads on the right side of the search results + +Code structure: +- HTML structure with header, search bar, autocomplete dropdown, search button +- Search results area to display search results +- Sidebar area to display the AI-generated overview +- Use Tailwind CSS utility classes for styling +- Use jQuery to handle user interactions: + - Typing in search bar to show/filter autocomplete suggestions + - Selecting autocomplete suggestion to populate search bar + - Clicking search button to display search results + - Clicking "Generate" button to display AI overview +- Hardcode search results and AI overview content for demo purposes - - - + + -
-
Gmail
-
Images
- User avatar -
- -
- Google logo +
+
+ Google logo +
+ + +
+ + Profile picture of the user +
-
- - -
+
+ +
+
The Crossword
+
Play the Daily New York Times Crossword puzzle edited by Will ...
+
-