Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Screenshot Comparison</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| h1 { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| } | |
| .comparison { | |
| margin-bottom: 40px; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| border-radius: 5px; | |
| overflow: hidden; | |
| } | |
| .prompt { | |
| background-color: #f3f3f3; | |
| padding: 10px 20px; | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| .images { | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .image-container { | |
| flex: 1; | |
| padding: 10px; | |
| text-align: center; | |
| } | |
| .image-container h3 { | |
| margin-top: 0; | |
| color: #555; | |
| } | |
| img { | |
| max-width: 100%; | |
| border: 1px solid #ddd; | |
| } | |
| .back-to-top { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background-color: #333; | |
| color: white; | |
| padding: 10px 15px; | |
| border-radius: 5px; | |
| text-decoration: none; | |
| } | |
| #prompt-list { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| background-color: white; | |
| border: 1px solid #ddd; | |
| padding: 10px; | |
| border-radius: 5px; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| } | |
| #prompt-list h3 { | |
| margin-top: 0; | |
| } | |
| #prompt-list ul { | |
| margin: 0; | |
| padding-left: 20px; | |
| } | |
| #prompt-list li { | |
| margin-bottom: 5px; | |
| } | |
| #prompt-list a { | |
| text-decoration: none; | |
| color: #0066cc; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Local vs Production Screenshot Comparison</h1> | |
| <div id="prompt-list"> | |
| <h3>Prompts</h3> | |
| <ul> | |
| <li><a href="#prompt-1">Make a viral meme</a></li> | |
| <li><a href="#prompt-2">Generate music</a></li> | |
| <li><a href="#prompt-3">Enhance audio quality</a></li> | |
| <li><a href="#prompt-4">Generate an application</a></li> | |
| <li><a href="#prompt-5">Restore an old photo</a></li> | |
| <li><a href="#prompt-6">Create a custom emoji</a></li> | |
| <li><a href="#prompt-7">Create a 3D avatar</a></li> | |
| <li><a href="#prompt-8">Try on virtual clothes</a></li> | |
| <li><a href="#prompt-9">Put a logo on an image</a></li> | |
| <li><a href="#prompt-10">Track objects in video</a></li> | |
| <li><a href="#prompt-11">Generate a custom logo</a></li> | |
| <li><a href="#prompt-12">Remove objects from a photo</a></li> | |
| <li><a href="#prompt-13">Extend images automatically</a></li> | |
| <li><a href="#prompt-14">Generate song lyrics</a></li> | |
| <li><a href="#prompt-15">Add subtitles to a video</a></li> | |
| <li><a href="#prompt-16">Detect objects in an image</a></li> | |
| <li><a href="#prompt-17">Change the lighting in a photo</a></li> | |
| <li><a href="#prompt-18">Create an anime version of me</a></li> | |
| <li><a href="#prompt-19">Remove background from a picture</a></li> | |
| <li><a href="#prompt-20">Transcribe podcast audio to text</a></li> | |
| <li><a href="#prompt-21">Separate vocals from a music track</a></li> | |
| <li><a href="#prompt-22">Convert 2D sketches into 3D models</a></li> | |
| <li><a href="#prompt-23">Remove background noise from an audio</a></li> | |
| <li><a href="#prompt-24">Extract text from scanned documents</a></li> | |
| <li><a href="#prompt-25">Generate music for a video</a></li> | |
| <li><a href="#prompt-26">Create a video from an image</a></li> | |
| <li><a href="#prompt-27">Convert CSV data into insights</a></li> | |
| <li><a href="#prompt-28">Add realistic sound to a video</a></li> | |
| <li><a href="#prompt-29">Predict stock market trends</a></li> | |
| <li><a href="#prompt-30">Translate a language in real-time</a></li> | |
| <li><a href="#prompt-31">Colorize black and white photos</a></li> | |
| <li><a href="#prompt-32">Transform a daytime scene into a night scene</a></li> | |
| <li><a href="#prompt-33">Create a customer service chatbot</a></li> | |
| <li><a href="#prompt-34">Convert a portrait into a talking video</a></li> | |
| <li><a href="#prompt-35">Generate a 3D model from an image</a></li> | |
| <li><a href="#prompt-36">Detect harmful or offensive content in images</a></li> | |
| <li><a href="#prompt-37">Generate speech from text in multiple languages</a></li> | |
| <li><a href="#prompt-38">Automate meeting notes summaries</a></li> | |
| </ul> | |
| </div> | |
| <div id="comparisons-container"> | |
| <!-- Prompt 1 --> | |
| <div class="comparison" id="prompt-1"> | |
| <div class="prompt">Prompt 1: Make a viral meme</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/01_local_make_a_viral_meme.png" alt="Local: Make a viral meme"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/01_prod_make_a_viral_meme.png" alt="Production: Make a viral meme"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 2 --> | |
| <div class="comparison" id="prompt-2"> | |
| <div class="prompt">Prompt 2: Generate music</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/02_local_generate_music.png" alt="Local: Generate music"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/02_prod_generate_music.png" alt="Production: Generate music"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 3 --> | |
| <div class="comparison" id="prompt-3"> | |
| <div class="prompt">Prompt 3: Enhance audio quality</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/03_local_enhance_audio_quality.png" alt="Local: Enhance audio quality"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/03_prod_enhance_audio_quality.png" alt="Production: Enhance audio quality"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 4 --> | |
| <div class="comparison" id="prompt-4"> | |
| <div class="prompt">Prompt 4: Generate an application</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/04_local_generate_an_application.png" alt="Local: Generate an application"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/04_prod_generate_an_application.png" alt="Production: Generate an application"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 5 --> | |
| <div class="comparison" id="prompt-5"> | |
| <div class="prompt">Prompt 5: Restore an old photo</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/05_local_restore_an_old_photo.png" alt="Local: Restore an old photo"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/05_prod_restore_an_old_photo.png" alt="Production: Restore an old photo"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 6 --> | |
| <div class="comparison" id="prompt-6"> | |
| <div class="prompt">Prompt 6: Create a custom emoji</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/06_local_create_a_custom_emoji.png" alt="Local: Create a custom emoji"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/06_prod_create_a_custom_emoji.png" alt="Production: Create a custom emoji"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 7 --> | |
| <div class="comparison" id="prompt-7"> | |
| <div class="prompt">Prompt 7: Create a 3D avatar</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/07_local_create_a_3d_avatar.png" alt="Local: Create a 3D avatar"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/07_prod_create_a_3d_avatar.png" alt="Production: Create a 3D avatar"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 8 --> | |
| <div class="comparison" id="prompt-8"> | |
| <div class="prompt">Prompt 8: Try on virtual clothes</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/08_local_try_on_virtual_clothes.png" alt="Local: Try on virtual clothes"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/08_prod_try_on_virtual_clothes.png" alt="Production: Try on virtual clothes"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 9 --> | |
| <div class="comparison" id="prompt-9"> | |
| <div class="prompt">Prompt 9: Put a logo on an image</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/09_local_put_a_logo_on_an_image.png" alt="Local: Put a logo on an image"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/09_prod_put_a_logo_on_an_image.png" alt="Production: Put a logo on an image"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 10 --> | |
| <div class="comparison" id="prompt-10"> | |
| <div class="prompt">Prompt 10: Track objects in video</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/10_local_track_objects_in_video.png" alt="Local: Track objects in video"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/10_prod_track_objects_in_video.png" alt="Production: Track objects in video"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 11 --> | |
| <div class="comparison" id="prompt-11"> | |
| <div class="prompt">Prompt 11: Generate a custom logo</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/11_local_generate_a_custom_logo.png" alt="Local: Generate a custom logo"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/11_prod_generate_a_custom_logo.png" alt="Production: Generate a custom logo"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 12 --> | |
| <div class="comparison" id="prompt-12"> | |
| <div class="prompt">Prompt 12: Remove objects from a photo</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/12_local_remove_objects_from_a_photo.png" alt="Local: Remove objects from a photo"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/12_prod_remove_objects_from_a_photo.png" alt="Production: Remove objects from a photo"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 13 --> | |
| <div class="comparison" id="prompt-13"> | |
| <div class="prompt">Prompt 13: Extend images automatically</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/13_local_extend_images_automatically.png" alt="Local: Extend images automatically"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/13_prod_extend_images_automatically.png" alt="Production: Extend images automatically"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 14 --> | |
| <div class="comparison" id="prompt-14"> | |
| <div class="prompt">Prompt 14: Generate song lyrics</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/14_local_generate_song_lyrics.png" alt="Local: Generate song lyrics"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/14_prod_generate_song_lyrics.png" alt="Production: Generate song lyrics"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 15 --> | |
| <div class="comparison" id="prompt-15"> | |
| <div class="prompt">Prompt 15: Add subtitles to a video</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/15_local_add_subtitles_to_a_video.png" alt="Local: Add subtitles to a video"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/15_prod_add_subtitles_to_a_video.png" alt="Production: Add subtitles to a video"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 16 --> | |
| <div class="comparison" id="prompt-16"> | |
| <div class="prompt">Prompt 16: Detect objects in an image</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/16_local_detect_objects_in_an_image.png" alt="Local: Detect objects in an image"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/16_prod_detect_objects_in_an_image.png" alt="Production: Detect objects in an image"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 17 --> | |
| <div class="comparison" id="prompt-17"> | |
| <div class="prompt">Prompt 17: Change the lighting in a photo</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/17_local_change_the_lighting_in_a_photo.png" alt="Local: Change the lighting in a photo"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/17_prod_change_the_lighting_in_a_photo.png" alt="Production: Change the lighting in a photo"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 18 --> | |
| <div class="comparison" id="prompt-18"> | |
| <div class="prompt">Prompt 18: Create an anime version of me</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/18_local_create_an_anime_version_of_me.png" alt="Local: Create an anime version of me"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/18_prod_create_an_anime_version_of_me.png" alt="Production: Create an anime version of me"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 19 --> | |
| <div class="comparison" id="prompt-19"> | |
| <div class="prompt">Prompt 19: Remove background from a picture</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/19_local_remove_background_from_a_picture.png" alt="Local: Remove background from a picture"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/19_prod_remove_background_from_a_picture.png" alt="Production: Remove background from a picture"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 20 --> | |
| <div class="comparison" id="prompt-20"> | |
| <div class="prompt">Prompt 20: Transcribe podcast audio to text</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/20_local_transcribe_podcast_audio_to_text.png" alt="Local: Transcribe podcast audio to text"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/20_prod_transcribe_podcast_audio_to_text.png" alt="Production: Transcribe podcast audio to text"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 21 --> | |
| <div class="comparison" id="prompt-21"> | |
| <div class="prompt">Prompt 21: Separate vocals from a music track</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/21_local_separate_vocals_from_a_music_track.png" alt="Local: Separate vocals from a music track"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/21_prod_separate_vocals_from_a_music_track.png" alt="Production: Separate vocals from a music track"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 22 --> | |
| <div class="comparison" id="prompt-22"> | |
| <div class="prompt">Prompt 22: Convert 2D sketches into 3D models</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/22_local_convert_2d_sketches_into_3d_models.png" alt="Local: Convert 2D sketches into 3D models"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/22_prod_convert_2d_sketches_into_3d_models.png" alt="Production: Convert 2D sketches into 3D models"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 23 --> | |
| <div class="comparison" id="prompt-23"> | |
| <div class="prompt">Prompt 23: Remove background noise from an audio</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/23_local_remove_background_noise_from_an_audio.png" alt="Local: Remove background noise from an audio"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/23_prod_remove_background_noise_from_an_audio.png" alt="Production: Remove background noise from an audio"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 24 --> | |
| <div class="comparison" id="prompt-24"> | |
| <div class="prompt">Prompt 24: Extract text from scanned documents</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/24_local_extract_text_from_scanned_documents.png" alt="Local: Extract text from scanned documents"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/24_prod_extract_text_from_scanned_documents.png" alt="Production: Extract text from scanned documents"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 25 --> | |
| <div class="comparison" id="prompt-25"> | |
| <div class="prompt">Prompt 25: Generate music for a video</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/25_local_generate_music_for_a_video.png" alt="Local: Generate music for a video"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/25_prod_generate_music_for_a_video.png" alt="Production: Generate music for a video"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 26 --> | |
| <div class="comparison" id="prompt-26"> | |
| <div class="prompt">Prompt 26: Create a video from an image</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/26_local_create_a_video_from_an_image.png" alt="Local: Create a video from an image"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/26_prod_create_a_video_from_an_image.png" alt="Production: Create a video from an image"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 27 --> | |
| <div class="comparison" id="prompt-27"> | |
| <div class="prompt">Prompt 27: Convert CSV data into insights</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/27_local_convert_csv_data_into_insights.png" alt="Local: Convert CSV data into insights"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/27_prod_convert_csv_data_into_insights.png" alt="Production: Convert CSV data into insights"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 28 --> | |
| <div class="comparison" id="prompt-28"> | |
| <div class="prompt">Prompt 28: Add realistic sound to a video</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/28_local_add_realistic_sound_to_a_video.png" alt="Local: Add realistic sound to a video"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/28_prod_add_realistic_sound_to_a_video.png" alt="Production: Add realistic sound to a video"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 29 --> | |
| <div class="comparison" id="prompt-29"> | |
| <div class="prompt">Prompt 29: Predict stock market trends</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/29_local_predict_stock_market_trends.png" alt="Local: Predict stock market trends"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/29_prod_predict_stock_market_trends.png" alt="Production: Predict stock market trends"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 30 --> | |
| <div class="comparison" id="prompt-30"> | |
| <div class="prompt">Prompt 30: Translate a language in real-time</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/30_local_translate_a_language_in_real_time.png" alt="Local: Translate a language in real-time"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/30_prod_translate_a_language_in_real_time.png" alt="Production: Translate a language in real-time"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 31 --> | |
| <div class="comparison" id="prompt-31"> | |
| <div class="prompt">Prompt 31: Colorize black and white photos</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/31_local_colorize_black_and_white_photos.png" alt="Local: Colorize black and white photos"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/31_prod_colorize_black_and_white_photos.png" alt="Production: Colorize black and white photos"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 32 --> | |
| <div class="comparison" id="prompt-32"> | |
| <div class="prompt">Prompt 32: Transform a daytime scene into a night scene</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/32_local_transform_a_daytime_scene_into_a_night_scene.png" alt="Local: Transform a daytime scene into a night scene"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/32_prod_transform_a_daytime_scene_into_a_night_scene.png" alt="Production: Transform a daytime scene into a night scene"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 33 --> | |
| <div class="comparison" id="prompt-33"> | |
| <div class="prompt">Prompt 33: Create a customer service chatbot</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/33_local_create_a_customer_service_chatbot.png" alt="Local: Create a customer service chatbot"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/33_prod_create_a_customer_service_chatbot.png" alt="Production: Create a customer service chatbot"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 34 --> | |
| <div class="comparison" id="prompt-34"> | |
| <div class="prompt">Prompt 34: Convert a portrait into a talking video</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/34_local_convert_a_portrait_into_a_talking_video.png" alt="Local: Convert a portrait into a talking video"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/34_prod_convert_a_portrait_into_a_talking_video.png" alt="Production: Convert a portrait into a talking video"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 35 --> | |
| <div class="comparison" id="prompt-35"> | |
| <div class="prompt">Prompt 35: Generate a 3D model from an image</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/35_local_generate_a_3d_model_from_an_image.png" alt="Local: Generate a 3D model from an image"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/35_prod_generate_a_3d_model_from_an_image.png" alt="Production: Generate a 3D model from an image"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 36 --> | |
| <div class="comparison" id="prompt-36"> | |
| <div class="prompt">Prompt 36: Detect harmful or offensive content in images</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/36_local_detect_harmful_or_offensive_content_in_images.png" alt="Local: Detect harmful or offensive content in images"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/36_prod_detect_harmful_or_offensive_content_in_images.png" alt="Production: Detect harmful or offensive content in images"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 37 --> | |
| <div class="comparison" id="prompt-37"> | |
| <div class="prompt">Prompt 37: Generate speech from text in multiple languages</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/37_local_generate_speech_from_text_in_multiple_languages.png" alt="Local: Generate speech from text in multiple languages"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/37_prod_generate_speech_from_text_in_multiple_languages.png" alt="Production: Generate speech from text in multiple languages"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt 38 --> | |
| <div class="comparison" id="prompt-38"> | |
| <div class="prompt">Prompt 38: Automate meeting notes summaries</div> | |
| <div class="images"> | |
| <div class="image-container"> | |
| <h3>Local</h3> | |
| <img src="screenshots/38_local_automate_meeting_notes_summaries.png" alt="Local: Automate meeting notes summaries"> | |
| </div> | |
| <div class="image-container"> | |
| <h3>Production</h3> | |
| <img src="screenshots/38_prod_automate_meeting_notes_summaries.png" alt="Production: Automate meeting notes summaries"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="back-to-top">Back to Top</a> | |
| <script> | |
| // JavaScript to highlight the current prompt in the navigation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const comparisons = document.querySelectorAll('.comparison'); | |
| const observerOptions = { | |
| root: null, | |
| rootMargin: '0px', | |
| threshold: 0.5 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const id = entry.target.id; | |
| const links = document.querySelectorAll('#prompt-list a'); | |
| links.forEach(link => { | |
| if (link.getAttribute('href') === '#' + id) { | |
| link.style.fontWeight = 'bold'; | |
| link.style.color = '#0066cc'; | |
| } else { | |
| link.style.fontWeight = 'normal'; | |
| link.style.color = '#0066cc'; | |
| } | |
| }); | |
| } | |
| }); | |
| }, observerOptions); | |
| comparisons.forEach(comparison => { | |
| observer.observe(comparison); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |