import asyncio from typing import Awaitable, Callable from custom_types import InputMode STREAM_CHUNK_SIZE = 20 async def mock_completion( process_chunk: Callable[[str, int], Awaitable[None]], input_mode: InputMode ) -> str: code_to_return = ( TALLY_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], 0) 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 = """ 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
Google logo
Profile picture of the user
To improve the app further and make it fully functional like the original video: 1. Add more visual styling to match the original, including: - Google logo and favicon - User profile icon - Search bar styling and hover effects - Search button icon and styling - Fonts and text sizes - Spacing and layout adjustments 2. Implement the search functionality: - Perform a search when the user presses Enter or clicks the search button - Show a loading state while searching - Display the search results dynamically based on the query - Handle cases when no results are found 3. Enhance the autocomplete functionality: - Fetch autocomplete suggestions from a data source based on the user's input - Highlight the text match in the suggestions - Allow navigating the suggestions with arrow keys - Update the search input when a suggestion is selected 4. Improve the AI-powered overview: - Fetch the overview content dynamically based on the search query - Display a loading state while generating the overview - Enhance the styling of the overview to match the original 5. Add additional UI elements: - Header navigation tabs (About, Store, Gmail, Images) - Footer links (Advertising, Business, How Search works, Privacy, Terms) - Pagination for search results - Feedback link 6. Optimize performance: - Lazy-load images and content - Implement caching mechanisms - Minify and compress assets 7. Ensure responsiveness: - Make the layout responsive and mobile-friendly - Adjust font sizes, padding, and margins for different screen sizes - Hide/collapse certain elements on smaller screens 8. Enhance accessibility: - Add appropriate ARIA attributes - Ensure keyboard navigation works properly - Provide alternative text for images 9. Implement error handling: - Handle network errors gracefully - Display user-friendly error messages - Provide options to retry or refresh 10. Add smooth animations and transitions: - Fade in/out effects for loading states - Smooth sliding animations for autocomplete suggestions - Subtle hover and click animations for interactive elements Google Search
About Store Gmail Images Profile picture of the user
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! """