import asyncio from typing import Awaitable, Callable from custom_types import InputMode STREAM_CHUNK_SIZE = 5 async def mock_completion( process_chunk: Callable[[str], Awaitable[None]], input_mode: InputMode ) -> str: code_to_return = ( GOOGLE_FORM_VIDEO_PROMPT_MOCK if input_mode == "video" else NO_IMAGES_NYTIMES_MOCK_CODE ) for i in range(0, len(code_to_return), STREAM_CHUNK_SIZE): 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 APPLE_MOCK_CODE = """ Product Showcase
Brand Logo

WATCH SERIES 9

Smarter. Brighter. Mightier.

Learn more > Buy >
Product image of a smartwatch with a pink band and a circular interface displaying various health metrics. Product image of a smartwatch with a blue band and a square interface showing a classic analog clock face.
""" NYTIMES_MOCK_CODE = """ The New York Times - News
Tuesday, November 14, 2023
Today's Paper
The New York Times Logo
Account

Israeli Military Raids Gaza’s Largest Hospital

Israeli troops have entered the Al-Shifa Hospital complex, where conditions have grown dire and Israel says Hamas fighters are embedded.

See more updates
Flares and plumes of smoke over the northern Gaza skyline on Tuesday.

From Elvis to Elopements, the Evolution of the Las Vegas Wedding

The glittering city that attracts thousands of couples seeking unconventional nuptials has grown beyond the drive-through wedding.

8 MIN READ
""" NO_IMAGES_NYTIMES_MOCK_CODE = """ The New York Times - News
Tuesday, November 14, 2023
Today's Paper
Account

Israeli Military Raids Gaza’s Largest Hospital

Israeli troops have entered the Al-Shifa Hospital complex, where conditions have grown dire and Israel says Hamas fighters are embedded.

See more updates

From Elvis to Elopements, the Evolution of the Las Vegas Wedding

The glittering city that attracts thousands of couples seeking unconventional nuptials has grown beyond the drive-through wedding.

8 MIN READ
""" MORTGAGE_CALCULATOR_VIDEO_PROMPT_MOCK = """ The user flow in the video seems to be: 1. The calculator starts with some default values for loan amount, loan term, interest rate, etc. 2. The user toggles the "Include taxes & fees" checkbox which shows an explanation tooltip. 3. The user selects different loan terms from the dropdown, which updates the monthly payment amount. 4. The user enters a custom loan amount. 5. The user selects a different loan term (30-yr fixed FHA). 6. The user enters additional details like home price, down payment, state, credit score, property tax, home insurance, and HOA fees. 7. The calculator updates the total monthly payment breakdown. To build this: - Use a container div for the whole calculator - Have sections for Monthly Payment, Purchase Budget, loan details, additional costs - Use input fields, dropdowns, and checkboxes for user input - Update values dynamically using JavaScript when inputs change - Show/hide explanation tooltip when checkbox is toggled - Update monthly payment whenever loan amount, interest rate or term is changed - Allow selecting loan term from a dropdown - Update total monthly payment breakdown as additional costs are entered - Style everything to match the screenshots using Tailwind utility classes
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
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! """