A Web Search App (Difficulty: 3)

[info-creaticode]

Introduction

 

The world wide web contains a huge amount of information, and you can almost find anything you would like to learn about if you know how to search the web. In this tutorial, we will build a small web search app, where the user can run a web search on a few keywords. We will display a summary of the results, and the user can also open any of the websites in the search result.

Note that this project only takes about 20 blocks for all the tasks above, and it demonstrates how to use widgets, tables, and variables in a very efficient way.

 
 

Step 1 - Add a Dark Background

 

Create a new project, remove the dog sprite, then switch to the stage. You can search or create a dark background image from the AI image library so that it is not very distracting. For example, if you search for “dark”, you can find a background like this one:

 
 

Step 2 - Add Input Textbox and Search Button

 

When the green flag is clicked, we will add 2 widgets onto the stage. The textbox allows the user to input a query, and the button will trigger a search:

 
You can add these 2 widgets like this:

 
 

Step 3 - Handle the Search Button Click

 

After the user input some query, and then click the “Search” button, we can run a web search. As an example, we will ask for the top 5 most relevant websites, and store their information in a table named “result_table”:

 
To review the search results, you can temporarily enable the “result_table” display, and you will see that the table is populated with 5 rows of search results, and each row has 3 columns: title, link and snippet.

 
 

Step 4 - Display the First Result as a Button

 

Next, we need to display all 5 results. However, to start simple, let’s try to only display the first result as a new button like this:

 
To do that, we need to read the content of row 1 and column “title” from the result_table. We will also simply name this button as “1”, which will be useful in the next few steps:

 
 

Step 5 - Display All Results Using a For-Loop

 

Now we can modify our code so it iterates through all the rows in the result_table.

First, we can use a for-loop to go through all rows in the table like this:

Next, we will use the “row” variable to specify which row to read, and the name of the new buttons will be 1 to 5:

 
Lastly, the y position of the buttons need to be different. Suppose we want them to be 50 units apart, so the y position will be: 80, 30, -20, -70, -120. This sequence can be expressed using the “row” variable like this: y position = 130 - (50 * row).

 
The result of this step is like this:

 
 

Step 6 - Click the First Result

 

Lastly, we need to allow the user to click any button to open the corresponding website. To start simple, let’s ONLY handle the first button, which is named “1”.

When the “1” button is clicked, we can read its URL from the table, at row 1 and column “link”. Then we can open a new browser tab using that URL:

 
You can try to click the first result button:

 
 

Step 7 - Handle the Other 4 Buttons

 

 
It should be fairly easy to duplicate the above code 4 times, and make them handle the other 4 buttons:

 
 

Step 8 - A More Elegant Solution

 

Although the code above works, it is regarded “ugly”, because it repeat the same code. Imagine we want to change the program to show 10 results, then we have to add more of such blocks.

A more elegant but also advanced solution is like this: we can use a variable “button index” to represent which button is clicked, and then use that variable to determine which link to read out from the table:

 
Essentially, these 2 rows of blocks will serve the same function as the blocks from steps 6 and 7.

 
 

Step 9 - Make Space for a Summary Textbox

 

Although we can stop here, it would be nice to add one more feature: to summarize the information we got using ChatGPT. This is becoming the more popular way of web search.

To do that, we first need to move all the 5 buttons lower, so we can make some space above them. This can be done easily by changing the formula used to calculate the y position of the buttons to “40 - 40 * row”:

 
Now the buttons look like this:

 
 

Step 10 - Add a Rich Textbox

 

Next, we can add a new rich textbox above the 5 buttons, which will be used to display the summary. We can call it the “summarybox”:

 
Note that it should be read only since the summary will not be changed by the user

It will look like this:

 
 

Step 11 - Compose the request to ChatGPT

 

Now we need to compose a request using the user query and the search results, which will contain the following 4 parts:

1. Text: Here is a user question:

2. Block: The value of the textbox1

3. Text: Answer the question based on the table below:

4. Block: The value of the table variable “result_table”

These 4 parts can be joined with a new line symbol “\n” like this:

 
Note that the “result_table” reporter block will return all information contained in the table. Its content is not easy to read by human, but it will be no problem for ChatGPT to understand it:

 
 

Step 12 - Send the request to ChatGPT and Show the Response

 

For the last step, we just need to send the request, and show the response value in the “summarybox”:

 
For the ChatGPT request, use a “waiting” mode, a maximum length of 500, and a session type of “new”.

This is the final demo:

 
 

Challenges

 

Here are some suggestions on how you can further improve this program:

• Display snippets: instead of only showing the title of each website in the search result, we can also display the “snippet”, which is a preview of that website’s content.

• Improving Search Queries: Currently we simply run the “web search” block on whatever the user input. It might be helpful to convert the user input to a more effective search query using ChatGPT. For example, if the user input “I need to prepare a birthday gift”, it might be better to transform it into a query like “top birthday gift ideas”.