0.7 First Day Assignment

Overview

Your First Day application retrieves a weather forecast as JSON. JSON organizes information using named fields, values, and lists. Software can parse this structure to locate information such as the forecast date, precipitation probability, and precipitation amount.

In this assignment, paste the JSON from your weather application into ChatGPT and use it to generate two images: a weather pictogram and a realistic rendering of what the city might look like in those conditions. Start from your completed 0.6 solution and add the supplied Copy button below.

Instructions
1.Add a Button to Copy the JSON
A Add the button in MainWindow.xaml

Back up your completed 0.6 solution, then open your working LastName.sln. Close the running application. In MainWindow.xaml, find the Border containing BrowserControl. Replace only that three-line Border block with these four lines. Keep the surrounding StackPanel and all other XAML.

MainWindow.xaml — replace the Border block containing BrowserControl
<Border Height="125" BorderThickness="1" BorderBrush="Black">
    <WebBrowser x:Name="BrowserControl"/>
</Border>
<Button x:Name="copyWeatherButton" Content="Copy" Width="125" Margin="5" HorizontalAlignment="Left" Click="CopyWeatherButton_Click" />
B Add the Copy button method

Open MainWindow.xaml.cs. Paste this complete method immediately above the existing LoadWeatherButton_Click declaration, inside the MainWindow class and outside any other method. If CopyWeatherButton_Click already exists, replace it with this method.

MainWindow.xaml.cs — CopyWeatherButton_Click
private void CopyWeatherButton_Click(object sender, System.Windows.RoutedEventArgs e)
{
    dynamic document = this.BrowserControl.Document;
    System.Windows.Clipboard.SetText((string)document.body.innerText);
}

This copies the text displayed in BrowserControl to the clipboard. Save your files and run the application. Load the weather and wait for the JSON to appear before clicking Copy.

2.Copy Your Weather JSON
A Run your First Day application and load a forecast

Use the weather feature you created in 0.5. For the Chicago example, enter -87.6298 in Longitude and 41.8781 in Latitude, then click Load weather. Wait for the JSON forecast to appear.

B Look at the JSON and copy the complete response

Find daily, which contains the forecast date and values, and daily_units, which identifies their units. Notice that each value has a name that helps software identify what it means.

Click Copy. You will paste the copied JSON into ChatGPT in the next step.

3.Use ChatGPT to Turn the Data into Images
A Paste the JSON into ChatGPT and write your own request

Open a new conversation in ChatGPT and paste the complete JSON with Ctrl+V. Add your own instructions before sending the message. Use these ideas to guide your request:

  • Identify the city whose weather you loaded.
  • Explain that the pasted JSON contains the forecast data to use.
  • Ask for a weather pictogram: an image using weather symbols, numbers, and labels to explain the forecast.
  • Ask for a realistic rendered image of what that city might look like in the supplied weather conditions.
  • Ask ChatGPT to identify which JSON fields and values it used to create the images.

Use your own wording. If ChatGPT produces only one image, ask for the other in a follow-up message in the same conversation.

B Compare the images with the JSON

Look at the fields ChatGPT identified. Match at least one displayed number or weather detail to its value in the JSON. Check the date and units in the pictogram and whether the city rendering fits the supplied forecast. If something does not match, describe the problem and ask for a correction.

Submission
4.Save and Submit Your Results
A Save both images and submit them to Canvas

Submit the weather pictogram and the realistic city rendering to the 0.7 First Day Assignment in Canvas. Include the JSON you used in a text file and one or two sentences identifying a JSON field and explaining how its value appears in the generated result.