diff --git a/backend/mock_llm.py b/backend/mock_llm.py index df0b8ed..0b903b7 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 = 100 +STREAM_CHUNK_SIZE = 5 async def mock_completion( process_chunk: Callable[[str], Awaitable[None]], input_mode: InputMode ) -> str: code_to_return = ( - MORTGAGE_CALCULATOR_VIDEO_PROMPT_MOCK + GOOGLE_FORM_VIDEO_PROMPT_MOCK if input_mode == "video" else NO_IMAGES_NYTIMES_MOCK_CODE ) @@ -20,6 +20,16 @@ async def mock_completion( await process_chunk(code_to_return[i : i + STREAM_CHUNK_SIZE]) await asyncio.sleep(0.01) + if input_mode == "video": + # Extract the last block from code_to_return + # because we can have multiple passes + start = code_to_return.rfind("") + len("") + if start != -1 and end != -1: + code_to_return = code_to_return[start:end] + else: + code_to_return = "Error: HTML block not found." + return code_to_return @@ -445,4 +455,1063 @@ $(document).ready(function() { + + +More things to consider: +- Add validation to input fields to prevent non-numeric values +- Add a reset button to clear all inputs and reset to default values + + + + + + + + + +
+
Mortgage Calculator
+ +
+
Monthly payment
+
Purchase budget
+
+ +
+ + + + +
+ +
$1,696
+ +
+
Loan amount
+ +
+ +
+
Loan term
+ +
+ +
+
+
Interest
+
7.61 %
+
+ +
+ +
+
+
Home price
+ +
+
+
Down payment
+
+ +
20 %
+
+
+
+ +
+
+
State
+ +
+
+
Credit score
+ +
+
+ +
+
+
Property tax (yearly)
+ +
+
+
Home insurance (yearly)
+ +
+
+
Private mortgage insurance (monthly)
+ +
+
+
Homeowners association (monthly)
+ +
+
+ +
+
+
Total monthly payment
+
$2,036
+
+
+
Loan
+
$1,635
+
Taxes & fees
+
$401
+
+
+ +
+
Disclaimer • Feedback
+
+
+ + + + + +""" + +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 + + + + + + + + + + + +
+
Gmail
+
Images
+ User avatar +
+ +
+ Google logo + +
+ + +
+ + + +
+ + +
+
+ + + + + + + +To further improve the app based on the original instructions: + +1. Adjust the font sizes, colors, and spacing to more closely match the Google style. +2. Add the hover effect on the search bar to expand its shadow. +3. Position the microphone icon correctly inside the search bar. +4. Implement the "I'm Feeling Lucky" functionality to redirect to the first search result. +5. Add the "Search by voice" and "Search by image" options that appear on hover. +6. Show the "Clear" button in the search bar when there's text entered. +7. Make the search suggestions clickable to perform the search. +8. Update the page title and URL when a search is performed. +9. Show a more realistic search result with a link, description, and URL. +10. Add more filter options and make them functional to update the search results. +11. Generate a more realistic AI-powered overview of the search topic. +12. Refine the responsive layout for different screen sizes. + + + + + Google + + + + + + + + + + +
+
Gmail
+
Images
+ User avatar +
+ +
+ Google logo + +
+ + + +
+ + + + + +
+ + +
+
+ + + + + + + +""" + +TALLY_FORM_VIDEO_PROMPT_MOCK = """ + +The user flow in the video seems to be: +1. The quiz starts by asking "What is the capital of Bulgaria?" with three multiple choice options. The user selects "Sofia". +2. The next question asks "What is the most famous dish in Belgium?" with two image-based options. The user selects "Steak with fries". +3. The next question asks "What is the name of this actor?" with an image of an older man with gray hair and beard. The user types in "Clooney" and submits the answer. +4. The quiz ends showing the user's score of 10/30 and a "Bummer, try again!" message with an arrow to restart. + +To build this as a functional web app: +1. Create the overall page structure with a title, question area, answer options area, and next/submit buttons. +2. Use jQuery to show/hide different questions and update the answer options based on the current question. +3. Store the questions, answer options, and correct answers in a Javascript array. +4. Keep track of the user's selections and compare them to the correct answers to calculate the score. +5. After the last question, show the final score and restart option. +6. Style everything to match the screenshots using Tailwind utility classes. + + + + + + + Online Trivia Quiz + + + + +

Online Trivia Quiz

+ +
+

+
+
+ + + + + + + + + + + + + + +This implements the online trivia quiz app as shown in the video. It uses jQuery to handle the interactions and Tailwind CSS for styling. The questions, options, and answers are defined in the quizData array. The app keeps track of the user's current question and score, allows selecting or entering answers, and displays the final score at the end with the option to restart. + + +To further improve the app to match the original video: + +1. Adjust the styling to more closely match the font, colors, spacing, and layout in the screenshots. +2. Add a cursor pointer when hovering over answer options. +3. Improve the styling of the selected answer option. +4. Make the "Next" button change to an arrow icon on hover. +5. Add a "Back" button to go to the previous question. +6. Show the current question number and total (e.g. "Question 1 of 3"). +7. Animate the transitions between questions. +8. Improve the responsive layout for different screen sizes. +9. Preload the images to avoid flickering. +10. Refactor the code to be more modular and maintainable. + + + + + + + Online Trivia Quiz + + + + + + +

Online Trivia Quiz

+ +
+
+
+ + +
+

+
+
+ + + + + + + + +
+ + + + + + +This updated version makes several improvements to match the original app more closely: + +1. Styling is refined to better match the font, colors, spacing, and layout of the screenshots. +2. Cursor changes to a pointer when hovering over answer options. +3. Selected answer option is highlighted. +4. "Next" button shows an animated arrow on hover. +5. "Back" button added to go to the previous question. +6. Current question number and total are displayed. +7. Fade transitions are added between questions. +8. Layout is made responsive for different screen sizes. +9. Images are preloaded to avoid flickering. +10. Code is refactored to be more modular and maintainable. + +The app should now be fully functional and closely resemble the look and behavior of the original video. Let me know if you would like any further adjustments! """