ChatGPT and a Dialog Pop-up
When developing software with generative AI, never lose sight of the big picture—lay the groundwork upfront.
This post is a footnote to my recent AI Advances article:
I collaborated with ChatGPT o1-preview to implement a dialog pop-up for displaying the results of a science-fiction analysis tool (as described in the article). Previously, the application lacked a clear indication—other than monitoring debug console output—that processing was complete and results were ready for retrieval. With this update, the application now displays a dialog pop-up when processing finishes, prompting the user to retrieve the results. This enhancement simplifies the process for the user, providing a clear and intuitive notification that the results are available. Figure 2 illustrates the dialog pop-up appearing upon the completion of processing.
Developing and integrating the dialog into the application took a bit longer than I anticipated—about thirty minutes in total. I initially thought it would be a quick and minor update. However, there was more back-and-forth with ChatGPT than I had hoped, as we worked through a series of minor oversights. This process involved some backtracking and debugging, particularly with Visual Studio resource files. That said, without ChatGPT as my collaborator, completing this task would have taken significantly longer, so I’m not complaining. Still, it’s worth noting that the process wasn’t as smooth as I had envisioned.
To provide some context, I have prior experience with dialog pop-ups in Windows. A long time ago, I professionally developed Windows GUI applications with Microsoft Visual Studio. While I’m familiar with the mechanics from that time, let’s say, “It’s been a while.”
My mistake this time was to limit my prompt to ChatGPT to “update the source code” for my application. It took the request literally and updated the code flawlessly (as I later verified). However, I neglected to ask it to consider the Visual Studio resource files and dialog properties definitions that would also need attending. These oversights became apparent during the build process, leading me to backtrack and realize, “Oh yeah, I needed to do those too.”
The too-simple prompt is what I used to kick this off:
Can you update the source code for the following application. Currently it caches the results which are available via HTTP at:
http://localhost:8000/visualize
I would like to you to keep that in place, but also pop up a dialog in the Windows GUI client when processing sentiments is complete. The dialog should have a button that allows the user to download and display the results via HTTP.
(code removed)
After ChatGPT generated the source files and I attempted to build them, I quickly realized that I had overlooked updating the resource files. This oversight could have been avoided if I had started with a more strategically crafted prompt rather than diving straight into a coding request. For example:
I am developing a Windows GUI application using Microsoft Visual Studio. I want to extend my application with a new Dialog pop-up. Provide an overview of the steps that are involved.In response to the strategic prompt (above), ChatGPT identified the right high-level steps. Figure 3 provides a partial display of its response.
Appendix 1 includes examples of my initial prompt/response interactions with ChatGPT . It would have been more efficient if I had followed my earlier advice: thinking through and refreshing myself on the top-level steps before diving into the details and debugging it afterwards.
Discussion
When writing this post, I gave an early draft of it to ChatGPT o1-preview, asking for advice. Here's the exact prompt I used:
What opening prompt should I have used to avoid the misunderstanding described in this post?
(The description provided above and in the Appendix was included in the prompt and omitted here)It responded with a lightly updated version of the earlier prompt, incorporating references to "resource files" and "dialog properties." Below is the response it provided:
I am developing a Windows GUI application using Microsoft Visual Studio. I want to add a new dialog pop-up that appears when processing sentiments is complete. The dialog should have a button that allows the user to download and display the results via HTTP from `http://localhost:8000/visualize`.
Please provide a detailed overview of all the steps involved in implementing this feature, including updating resource files, configuring dialog properties, and modifying the source code.In the original article, I emphasized the importance of listening to your collaborating AI. I wrote:
Storytelling with a generative AI also seems to require active “listening.” ...
By balancing clear communication, thoughtful iteration, and awareness of AIs' and our limitations, we can uncover new insights in this hybrid problem-solving process that merges human intuition with an LLM‘s expansive yet structured collaboration style.
Today’s footnote suggests the following update:
Storytelling with a generative AI not only requires active “listening” but also asking. My recent experience with implementing a dialog pop-up in a Windows GUI application illustrated this point. By starting with a more strategic prompt that requested an overview of all the steps involved—including updating resource files and configuring dialog properties—I could have avoided unnecessary backtracking and made the collaboration more efficient.
Appendix 1
The original prompt and select interaction are captured here.
Can you update the source code for the following application. Currently it caches the results which are available via HTTP at:
http://localhost:8000/visualize
I would like to you to keep that in place, but also pop up a dialog in the Windows GUI client when processing sentiments is complete. The dialog should have a button that allows the user to download and display the results via HTTP.
(code removed)
Fix, #include file "C:\Program Files (x86)\Windows Kits\10\Include\10.0.22621.0\um\gdiplus.h" includes itself
I'm seeing these errors and more. ideas? no instance of overloaded function "Image::Image" matches the specified type
more than one instance of constructor "Image::Image" matches the argument list:
declaration is incompatible with "Image *Image::FromStream(<error type> *stream, BOOL useEmbeddedColorManagement = 0)" (declared at line 84 of "C:\Program Files (x86)\Windows Kits\10\Include\10.0.22621.0\um\gdiplusbitmap.h")
identifier "Status" is undefined
...
I'm seeing these errors now, ideas? unresolved external symbol GdipAlloc referenced in function "public: static void * __cdecl Gdiplus::GdiplusBase::operator new(unsigned __int64)" (??2GdiplusBase@Gdiplus@@SAPEAX_K@Z)
unresolved external symbol GdipFree referenced in function "public: static void __cdecl Gdiplus::GdiplusBase::operator delete(void *)" (??3GdiplusBase@Gdiplus@@SAXPEAX@Z)
unresolved external symbol GdiplusStartup referenced in function wWinMain
unresolved external symbol GdiplusShutdown referenced in function wWinMain
unresolved external symbol GdipLoadImageFromStream referenced in function "public: __cdecl Gdiplus::Image::Image(struct IStream *,int)" (??0Image@Gdiplus@@QEAA@PEAUIStream@@H@Z)
unresolved external symbol GdipLoadImageFromStreamICM referenced in function "public: __cdecl Gdiplus::Image::Image(struct IStream *,int)" (??0Image@Gdiplus@@QEAA@PEAUIStream@@H@Z)
unresolved external symbol GdipCloneImage referenced in function "public: virtual class Gdiplus::Image * __cdecl Gdiplus::Image::Clone(void)" (?Clone@Image@Gdiplus@@UEAAPEAV12@XZ)
More debugging prompts for ChatGPT:
I ran the windows client. and it worked as before, but i don't see a dialog pop-up after it is completed processing the sentiments.
...
I get the following error in the output. Before DialogBox call.
DialogBox failed with error: The specified resource name cannot be found in the image file.
Appendix 2
When I asked ChatGPT o1-preview how I should have prompted it to avoid the need for back-and-forth debugging in Appendix 1, it recommended this updated prompt.
I am developing a Windows GUI application using Microsoft Visual Studio. I want to add a new dialog pop-up that appears when processing sentiments is complete. The dialog should have a button that allows the user to download and display the results via HTTP from http://localhost:8000/visualize.
Please provide a detailed overview of all the steps involved in implementing this feature, including updating resource files, configuring dialog properties, and modifying the source code.
(code removed)Below is the full ChatGPT o1-preview response.
To add a new dialog pop-up that appears when sentiment processing is complete and includes a button to download and display the results from `http://localhost:8000/visualize`, you need to perform several steps:
1. **Update Resource Files**:
- Add a new dialog resource to your application's resource file.
- Design the dialog layout and add the necessary controls.
- Assign unique resource IDs to the dialog and its controls.
2. **Configure Dialog Properties**:
- Set properties for the dialog, such as title, size, and style.
- Configure the button properties, including caption and control ID.
3. **Modify the Source Code**:
- Declare and implement a dialog procedure to handle messages for the new dialog.
- Modify the sentiment processing function to display the dialog upon completion.
- Implement the code to download and display the results when the button is clicked.
Below is a detailed step-by-step guide to implement this feature.
---
## **Step 1: Update Resource Files**
### **1.1 Open the Resource Editor**
- In Visual Studio, open your project.
- Go to **Resource View** (`View` → `Other Windows` → `Resource View`).
- If you don't have a resource file (e.g., `BSF-WindowsAnchorClient.rc`), create one by right-clicking on your project in **Solution Explorer** and selecting **Add** → **Resource**.
### **1.2 Add a New Dialog Resource**
- In **Resource View**, right-click on your resource file and select **Add** → **Resource**.
- In the **Add Resource** dialog, select **Dialog** and click **New**.
### **1.3 Design the Dialog**
- In the Dialog Editor, design your dialog:
- **Title**: Set to "Processing Complete" or any appropriate title.
- **Size**: Adjust the size as needed.
- Add a **Button** control:
- Drag a **Button** from the **Toolbox** onto the dialog.
- Set the **Caption** to "View Results".
- Position the button appropriately.
### **1.4 Assign Resource IDs**
- **Dialog ID**:
- Select the dialog.
- In the **Properties** window, set the **ID** to `IDD_PROCESS_COMPLETE_DIALOG`.
- **Button ID**:
- Select the button control.
- In the **Properties** window, set the **ID** to `IDC_VIEW_RESULTS_BUTTON`.
### **1.5 Update Resource Header File**
- Ensure that `resource.h` contains definitions for the new IDs:
```cpp
#define IDD_PROCESS_COMPLETE_DIALOG 130 // Ensure this ID is unique
#define IDC_VIEW_RESULTS_BUTTON 1002 // Ensure this ID is unique
```
---
## **Step 2: Configure Dialog Properties**
- **Dialog Properties**:
- **Style**: Typically `WS_POPUP | WS_CAPTION | WS_SYSMENU`.
- **Border**: Choose `Dialog Frame`.
- **System Menu**: Include if you want the close button.
- **Button Properties**:
- **Tab Order**: Set if needed.
- **Visible**: Ensure it's checked.
- **Enabled**: Ensure it's checked.
---
## **Step 3: Modify the Source Code**
### **3.1 Include Necessary Headers**
In `BSF-WindowsAnchorClient.cpp`, include the following headers:
```cpp
#include "resource.h" // For resource IDs
#include "httplib.h" // For HTTP requests
#include <shellapi.h> // For ShellExecute
#include <fstream> // For file operations
#pragma comment(lib, "Shell32.lib") // Link with Shell32.lib
```
### **3.2 Declare the Dialog Procedure**
Add the following function declaration at the top of `BSF-WindowsAnchorClient.cpp`:
```cpp
INT_PTR CALLBACK ProcessCompleteDlgProc(HWND hDlg, UINT message, WPARAM wParam, LPARAM lParam);
```
### **3.3 Implement the Dialog Procedure**
Add the following code to `BSF-WindowsAnchorClient.cpp`:
```cpp
INT_PTR CALLBACK ProcessCompleteDlgProc(HWND hDlg, UINT message, WPARAM wParam, LPARAM lParam)
{
UNREFERENCED_PARAMETER(lParam);
switch (message)
{
case WM_INITDIALOG:
return (INT_PTR)TRUE;
case WM_COMMAND:
if (LOWORD(wParam) == IDC_VIEW_RESULTS_BUTTON)
{
// Handle the button click to download and display results
char tempFilePath[MAX_PATH];
GetTempPathA(MAX_PATH, tempFilePath);
strcat_s(tempFilePath, MAX_PATH, "visualization.png");
if (DownloadVisualization("http://localhost:8000/visualize", tempFilePath))
{
// Open the image using the default image viewer
ShellExecuteA(NULL, "open", tempFilePath, NULL, NULL, SW_SHOW);
}
else
{
MessageBox(hDlg, L"Failed to download the visualization.", L"Error", MB_OK | MB_ICONERROR);
}
// Close the dialog
EndDialog(hDlg, LOWORD(wParam));
return (INT_PTR)TRUE;
}
else if (LOWORD(wParam) == IDCANCEL)
{
EndDialog(hDlg, LOWORD(wParam));
return (INT_PTR)TRUE;
}
break;
}
return (INT_PTR)FALSE;
}
```
### **3.4 Implement the DownloadVisualization Function**
Add the following function to `BSF-WindowsAnchorClient.cpp`:
```cpp
bool DownloadVisualization(const std::string& url, const std::string& savePath)
{
httplib::Client client("localhost", 8000);
auto res = client.Get("/visualize");
if (res && res->status == 200)
{
// Write the response body to a file
std::ofstream outFile(savePath, std::ios::binary);
outFile.write(res->body.c_str(), res->body.size());
outFile.close();
return true;
}
return false;
}
```
### **3.5 Modify Sentiment Processing Code to Display the Dialog**
In the `WM_COMMAND` handler for `IDM_PROCESS_SENTIMENT`, after `sentiment_main` finishes processing, add code to display the dialog:
```cpp
case IDM_PROCESS_SENTIMENT:
{
OutputDebugString(L"IDM_PROCESS_SENTIMENT case reached.\n");
PrintCurrentWorkingDirectory();
// Get the text from the edit control
int len = GetWindowTextLength(hEdit);
if (len > 0)
{
OutputDebugString(L"Text length is greater than 0.\n");
wchar_t* buffer = new wchar_t[len + 1];
GetWindowText(hEdit, buffer, len + 1);
// Convert to std::wstring
std::wstring wtext(buffer);
delete[] buffer;
// Convert std::wstring to std::string (assuming UTF-8)
std::string text = ws2s(wtext);
// Write text to a temporary file
char tempFilePath[MAX_PATH];
GetTempPathA(MAX_PATH, tempFilePath);
strcat_s(tempFilePath, MAX_PATH, "temp_text.txt");
OutputDebugStringA("Temporary file path: ");
OutputDebugStringA(tempFilePath);
OutputDebugStringA("\n");
std::ofstream outFile(tempFilePath);
outFile << text;
outFile.close();
OutputDebugStringA("Temporary file written.\n");
// Call sentiment_main() with the file path
OutputDebugStringA("Calling sentiment_main.\n");
sentiment_main(tempFilePath);
OutputDebugStringA("sentiment_main finished.\n");
// Display the dialog
DialogBox(hInst, MAKEINTRESOURCE(IDD_PROCESS_COMPLETE_DIALOG), hWnd, ProcessCompleteDlgProc);
// Remove the temporary file if desired
// DeleteFileA(tempFilePath);
}
else
{
MessageBox(hWnd, L"No text to process.", L"Error", MB_OK | MB_ICONERROR);
OutputDebugString(L"No text to process.\n");
}
}
break;
```
### **3.6 Handle Errors and Clean Up**
- Ensure proper error handling in `DownloadVisualization`.
- Optionally, delete the temporary visualization file after use.
---
## **Step 4: Testing**
1. **Build the Application**:
- Compile your project to ensure there are no syntax errors.
2. **Run the Application**:
- Start your application.
3. **Get Text**:
- Use the **Get Text** menu to input text from the clipboard or a file.
4. **Process Sentiment**:
- Use the **Process** → **Sentiment Anchors** menu to start processing.
- Wait for the processing to complete.
5. **Display the Dialog**:
- After processing, the "Processing Complete" dialog should appear.
6. **View Results**:
- Click the **View Results** button.
- The application should download the visualization and display it using the default image viewer.
---
## **Additional Notes**
- **Ensure the Server is Running**:
- Make sure the `SentimentServer` is running and accessible at `http://localhost:8000`.
- **Include Necessary Libraries**:
- Ensure that `httplib` and any other necessary libraries are properly included and linked in your project.
- **Error Handling**:
- Implement robust error handling to account for network issues, server errors, or missing files.
- **Thread Safety**:
- If you decide to make sentiment processing asynchronous, ensure thread safety when interacting with the GUI.
- **Security Considerations**:
- Be cautious when executing files or opening URLs to prevent security vulnerabilities.
---
By following these steps, you will have successfully added a dialog that appears upon completion of sentiment processing, with a button that allows the user to download and display the results via HTTP from `http://localhost:8000/visualize`.