mirror of
https://github.com/microsoft/agent-framework.git
synced 2026-06-16 21:04:09 +08:00
Fix and simplify ComputerUse sample (#5075)
* fix the computer use sample * rollback changes to the search state enum * address review comments * address review comments
This commit is contained in:
committed by
GitHub
Unverified
parent
d73c06fa8c
commit
86b49d800e
+4
-4
@@ -6,7 +6,7 @@
|
||||
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
<NoWarn>$(NoWarn);OPENAICUA001</NoWarn>
|
||||
<NoWarn>$(NoWarn);OPENAICUA001;MEAI001</NoWarn>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
@@ -19,13 +19,13 @@
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<None Update="Assets\cua_browser_search.png">
|
||||
<None Update="Assets\cua_browser_search.jpg">
|
||||
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
|
||||
</None>
|
||||
<None Update="Assets\cua_search_results.png">
|
||||
<None Update="Assets\cua_search_results.jpg">
|
||||
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
|
||||
</None>
|
||||
<None Update="Assets\cua_search_typed.png">
|
||||
<None Update="Assets\cua_search_typed.jpg">
|
||||
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
|
||||
</None>
|
||||
</ItemGroup>
|
||||
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 402 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 MiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 357 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
+51
-56
@@ -1,5 +1,6 @@
|
||||
// Copyright (c) Microsoft. All rights reserved.
|
||||
|
||||
using Microsoft.Extensions.AI;
|
||||
using OpenAI.Responses;
|
||||
|
||||
namespace Demo.ComputerUse;
|
||||
@@ -16,83 +17,77 @@ internal enum SearchState
|
||||
|
||||
internal static class ComputerUseUtil
|
||||
{
|
||||
/// <summary>
|
||||
/// Load and convert screenshot images to base64 data URLs.
|
||||
/// </summary>
|
||||
internal static Dictionary<string, byte[]> LoadScreenshotAssets()
|
||||
internal static async Task<Dictionary<string, string>> UploadScreenshotAssetsAsync(IHostedFileClient fileClient)
|
||||
{
|
||||
string baseDir = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Assets");
|
||||
string assetsDir = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Assets");
|
||||
|
||||
ReadOnlySpan<(string key, string fileName)> screenshotFiles =
|
||||
[
|
||||
("browser_search", "cua_browser_search.png"),
|
||||
("search_typed", "cua_search_typed.png"),
|
||||
("search_results", "cua_search_results.png")
|
||||
];
|
||||
(string key, string fileName)[] files =
|
||||
[
|
||||
("browser_search", "cua_browser_search.jpg"),
|
||||
("search_typed", "cua_search_typed.jpg"),
|
||||
("search_results", "cua_search_results.jpg")
|
||||
];
|
||||
|
||||
Dictionary<string, byte[]> screenshots = [];
|
||||
foreach (var (key, fileName) in screenshotFiles)
|
||||
Dictionary<string, string> screenshots = [];
|
||||
|
||||
foreach (var (key, fileName) in files)
|
||||
{
|
||||
string fullPath = Path.GetFullPath(Path.Combine(baseDir, fileName));
|
||||
screenshots[key] = File.ReadAllBytes(fullPath);
|
||||
HostedFileContent result = await fileClient.UploadAsync(
|
||||
Path.Combine(assetsDir, fileName), new HostedFileClientOptions() { Purpose = "assistants" });
|
||||
screenshots[key] = result.FileId;
|
||||
}
|
||||
|
||||
return screenshots;
|
||||
}
|
||||
|
||||
internal static async Task EnsureDeleteScreenshotAssetsAsync(IHostedFileClient fileClient, Dictionary<string, string> screenshots)
|
||||
{
|
||||
foreach (var (_, fileId) in screenshots)
|
||||
{
|
||||
try
|
||||
{
|
||||
await fileClient.DeleteAsync(fileId);
|
||||
}
|
||||
catch
|
||||
{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Process a computer action and simulate its execution.
|
||||
/// Simulates executing a computer action by advancing the state
|
||||
/// and returning the screenshot file ID for the new state.
|
||||
/// </summary>
|
||||
internal static (SearchState CurrentState, byte[] ImageBytes) HandleComputerActionAndTakeScreenshot(
|
||||
internal static async Task<(SearchState State, string FileId)> GetScreenshotAsync(
|
||||
ComputerCallAction action,
|
||||
SearchState currentState,
|
||||
Dictionary<string, byte[]> screenshots)
|
||||
Dictionary<string, string> screenshots)
|
||||
{
|
||||
Console.WriteLine($"Simulating the execution of computer action: {action.Kind}");
|
||||
|
||||
SearchState newState = DetermineNextState(action, currentState);
|
||||
string imageKey = GetImageKey(newState);
|
||||
|
||||
return (newState, screenshots[imageKey]);
|
||||
}
|
||||
|
||||
private static SearchState DetermineNextState(ComputerCallAction action, SearchState currentState)
|
||||
{
|
||||
string actionType = action.Kind.ToString();
|
||||
|
||||
if (actionType.Equals("type", StringComparison.OrdinalIgnoreCase) && action.TypeText is not null)
|
||||
if (action.Kind == ComputerCallActionKind.Wait)
|
||||
{
|
||||
return SearchState.Typed;
|
||||
await Task.Delay(TimeSpan.FromSeconds(5));
|
||||
}
|
||||
|
||||
if (IsEnterKeyAction(action, actionType))
|
||||
SearchState nextState = action.Kind switch
|
||||
{
|
||||
Console.WriteLine(" -> Detected ENTER key press");
|
||||
return SearchState.PressedEnter;
|
||||
}
|
||||
ComputerCallActionKind.Click when currentState == SearchState.Typed => SearchState.PressedEnter,
|
||||
ComputerCallActionKind.Type when action.TypeText is not null => SearchState.Typed,
|
||||
ComputerCallActionKind.KeyPress when IsEnterKey(action) => SearchState.PressedEnter,
|
||||
_ => currentState
|
||||
};
|
||||
|
||||
if (actionType.Equals("click", StringComparison.OrdinalIgnoreCase) && currentState == SearchState.Typed)
|
||||
string imageKey = nextState switch
|
||||
{
|
||||
Console.WriteLine(" -> Detected click after typing");
|
||||
return SearchState.PressedEnter;
|
||||
}
|
||||
SearchState.PressedEnter => "search_results",
|
||||
SearchState.Typed => "search_typed",
|
||||
_ => "browser_search"
|
||||
};
|
||||
|
||||
return currentState;
|
||||
return (nextState, screenshots[imageKey]);
|
||||
}
|
||||
|
||||
private static bool IsEnterKeyAction(ComputerCallAction action, string actionType)
|
||||
{
|
||||
return (actionType.Equals("key", StringComparison.OrdinalIgnoreCase) ||
|
||||
actionType.Equals("keypress", StringComparison.OrdinalIgnoreCase)) &&
|
||||
action.KeyPressKeyCodes is not null &&
|
||||
(action.KeyPressKeyCodes.Contains("Return", StringComparer.OrdinalIgnoreCase) ||
|
||||
action.KeyPressKeyCodes.Contains("Enter", StringComparer.OrdinalIgnoreCase));
|
||||
}
|
||||
|
||||
private static string GetImageKey(SearchState state) => state switch
|
||||
{
|
||||
SearchState.PressedEnter => "search_results",
|
||||
SearchState.Typed => "search_typed",
|
||||
_ => "browser_search"
|
||||
};
|
||||
private static bool IsEnterKey(ComputerCallAction action) =>
|
||||
action.KeyPressKeyCodes is not null &&
|
||||
(action.KeyPressKeyCodes.Contains("Return", StringComparer.OrdinalIgnoreCase) ||
|
||||
action.KeyPressKeyCodes.Contains("Enter", StringComparer.OrdinalIgnoreCase));
|
||||
}
|
||||
|
||||
@@ -1,146 +1,109 @@
|
||||
// Copyright (c) Microsoft. All rights reserved.
|
||||
|
||||
// This sample shows how to use Computer Use Tool with a ChatClientAgent.
|
||||
// This sample shows how to use the Computer Use tool with AIProjectClient.AsAIAgent(...).
|
||||
|
||||
using Azure.AI.Projects;
|
||||
using Azure.Identity;
|
||||
using Demo.ComputerUse;
|
||||
using Microsoft.Agents.AI;
|
||||
using Microsoft.Agents.AI.Foundry;
|
||||
using Microsoft.Extensions.AI;
|
||||
using OpenAI.Responses;
|
||||
|
||||
namespace Demo.ComputerUse;
|
||||
string endpoint = Environment.GetEnvironmentVariable("AZURE_AI_PROJECT_ENDPOINT") ?? throw new InvalidOperationException("AZURE_AI_PROJECT_ENDPOINT is not set.");
|
||||
string deploymentName = Environment.GetEnvironmentVariable("AZURE_AI_COMPUTER_USE_DEPLOYMENT_NAME") ?? "computer-use-preview";
|
||||
|
||||
internal sealed class Program
|
||||
AIProjectClient projectClient = new(new Uri(endpoint), new DefaultAzureCredential());
|
||||
using IHostedFileClient fileClient = projectClient.GetProjectOpenAIClient().AsIHostedFileClient();
|
||||
|
||||
AIAgent agent = projectClient.AsAIAgent(
|
||||
model: deploymentName,
|
||||
name: "ComputerAgent",
|
||||
instructions: "You are a computer automation assistant.",
|
||||
tools: [FoundryAITool.CreateComputerTool(ComputerToolEnvironment.Browser, 1026, 769)]);
|
||||
|
||||
Dictionary<string, string> screenshots = [];
|
||||
|
||||
try
|
||||
{
|
||||
private static async Task Main(string[] args)
|
||||
// Upload pre-captured screenshots that simulate browser state transitions.
|
||||
screenshots = await ComputerUseUtil.UploadScreenshotAssetsAsync(fileClient);
|
||||
|
||||
// Enable auto-truncation for the Responses API.
|
||||
ChatClientAgentRunOptions runOptions = new()
|
||||
{
|
||||
const string AgentInstructions = @"
|
||||
You are a computer automation assistant.
|
||||
|
||||
Be direct and efficient. When you reach the search results page, read and describe the actual search result titles and descriptions you can see.
|
||||
";
|
||||
|
||||
const string AgentName = "ComputerAgent-RAPI";
|
||||
|
||||
string endpoint = Environment.GetEnvironmentVariable("AZURE_AI_PROJECT_ENDPOINT") ?? throw new InvalidOperationException("AZURE_AI_PROJECT_ENDPOINT is not set.");
|
||||
string deploymentName = Environment.GetEnvironmentVariable("AZURE_AI_MODEL_DEPLOYMENT_NAME") ?? "computer-use-preview";
|
||||
|
||||
// WARNING: DefaultAzureCredential is convenient for development but requires careful consideration in production.
|
||||
// In production, consider using a specific credential (e.g., ManagedIdentityCredential) to avoid
|
||||
// latency issues, unintended credential probing, and potential security risks from fallback mechanisms.
|
||||
AIProjectClient aiProjectClient = new(new Uri(endpoint), new DefaultAzureCredential());
|
||||
|
||||
// Create a AIAgent with ComputerUseTool.
|
||||
AIAgent agent = aiProjectClient.AsAIAgent(deploymentName,
|
||||
instructions: AgentInstructions,
|
||||
name: AgentName,
|
||||
description: "Computer automation agent with screen interaction capabilities.",
|
||||
tools: [
|
||||
FoundryAITool.CreateComputerTool(ComputerToolEnvironment.Browser, 1026, 769),
|
||||
]);
|
||||
|
||||
await InvokeComputerUseAgentAsync(agent);
|
||||
}
|
||||
|
||||
private static async Task InvokeComputerUseAgentAsync(AIAgent agent)
|
||||
{
|
||||
// Load screenshot assets
|
||||
Dictionary<string, byte[]> screenshots = ComputerUseUtil.LoadScreenshotAssets();
|
||||
|
||||
ChatOptions chatOptions = new();
|
||||
CreateResponseOptions responseCreationOptions = new()
|
||||
ChatOptions = new ChatOptions
|
||||
{
|
||||
TruncationMode = ResponseTruncationMode.Auto
|
||||
};
|
||||
chatOptions.RawRepresentationFactory = (_) => responseCreationOptions;
|
||||
ChatClientAgentRunOptions runOptions = new(chatOptions)
|
||||
{
|
||||
AllowBackgroundResponses = true,
|
||||
};
|
||||
|
||||
ChatMessage message = new(ChatRole.User, [
|
||||
new TextContent("I need you to help me search for 'OpenAI news'. Please type 'OpenAI news' and submit the search. Once you see search results, the task is complete."),
|
||||
new DataContent(new BinaryData(screenshots["browser_search"]), "image/png")
|
||||
]);
|
||||
|
||||
// Initial request with screenshot - start with Bing search page
|
||||
Console.WriteLine("Starting computer automation session (initial screenshot: cua_browser_search.png)...");
|
||||
|
||||
// We use PreviousResponseId to chain calls, sending only the new computer_call_output items
|
||||
// instead of re-sending the full context.
|
||||
AgentSession session = await agent.CreateSessionAsync();
|
||||
AgentResponse response = await agent.RunAsync(message, session: session, options: runOptions);
|
||||
|
||||
// Main interaction loop
|
||||
const int MaxIterations = 10;
|
||||
int iteration = 0;
|
||||
// Initialize state machine
|
||||
SearchState currentState = SearchState.Initial;
|
||||
|
||||
while (true)
|
||||
{
|
||||
// Poll until the response is complete.
|
||||
while (response.ContinuationToken is { } token)
|
||||
{
|
||||
// Wait before polling again.
|
||||
await Task.Delay(TimeSpan.FromSeconds(2));
|
||||
|
||||
// Continue with the token.
|
||||
runOptions.ContinuationToken = token;
|
||||
|
||||
response = await agent.RunAsync(session, runOptions);
|
||||
}
|
||||
|
||||
// Clear the continuation token so the next RunAsync call is a fresh request.
|
||||
runOptions.ContinuationToken = null;
|
||||
|
||||
Console.WriteLine($"Agent response received (ID: {response.ResponseId})");
|
||||
|
||||
if (iteration >= MaxIterations)
|
||||
{
|
||||
Console.WriteLine($"\nReached maximum iterations ({MaxIterations}). Stopping.");
|
||||
break;
|
||||
}
|
||||
|
||||
iteration++;
|
||||
Console.WriteLine($"\n--- Iteration {iteration} ---");
|
||||
|
||||
// Check for computer calls in the response
|
||||
IEnumerable<ComputerCallResponseItem> computerCallResponseItems = response.Messages
|
||||
.SelectMany(x => x.Contents)
|
||||
.Where(c => c.RawRepresentation is ComputerCallResponseItem and not null)
|
||||
.Select(c => (ComputerCallResponseItem)c.RawRepresentation!);
|
||||
|
||||
ComputerCallResponseItem? firstComputerCall = computerCallResponseItems.FirstOrDefault();
|
||||
if (firstComputerCall is null)
|
||||
{
|
||||
Console.WriteLine("No computer call actions found. Ending interaction.");
|
||||
Console.WriteLine($"Final Response: {response}");
|
||||
break;
|
||||
}
|
||||
|
||||
// Process the first computer call response
|
||||
ComputerCallAction action = firstComputerCall.Action;
|
||||
string currentCallId = firstComputerCall.CallId;
|
||||
|
||||
Console.WriteLine($"Processing computer call (ID: {currentCallId})");
|
||||
|
||||
// Simulate executing the action and taking a screenshot
|
||||
(SearchState CurrentState, byte[] ImageBytes) screenInfo = ComputerUseUtil.HandleComputerActionAndTakeScreenshot(action, currentState, screenshots);
|
||||
currentState = screenInfo.CurrentState;
|
||||
|
||||
Console.WriteLine("Sending action result back to agent...");
|
||||
|
||||
// Send only the computer_call_output — the session carries PreviousResponseId for context continuity.
|
||||
AIContent callOutput = new()
|
||||
{
|
||||
RawRepresentation = new ComputerCallOutputResponseItem(
|
||||
currentCallId,
|
||||
output: ComputerCallOutput.CreateScreenshotOutput(new BinaryData(screenInfo.ImageBytes), "image/png"))
|
||||
};
|
||||
|
||||
response = await agent.RunAsync([new ChatMessage(ChatRole.User, [callOutput])], session: session, options: runOptions);
|
||||
RawRepresentationFactory = (_) => new CreateResponseOptions() { TruncationMode = ResponseTruncationMode.Auto },
|
||||
}
|
||||
};
|
||||
|
||||
// Send the initial request with a screenshot of the browser.
|
||||
ChatMessage message = new(ChatRole.User, [
|
||||
new TextContent("Search for 'OpenAI news'. Type it and submit. Once you see results, the task is complete."),
|
||||
new AIContent() { RawRepresentation = ResponseContentPart.CreateInputImagePart(imageFileId: screenshots["browser_search"], imageDetailLevel: ResponseImageDetailLevel.High) }
|
||||
]);
|
||||
|
||||
Console.WriteLine("Starting computer use session...");
|
||||
|
||||
AgentSession session = await agent.CreateSessionAsync();
|
||||
AgentResponse response = await agent.RunAsync(message, session: session, options: runOptions);
|
||||
|
||||
SearchState currentState = SearchState.Initial;
|
||||
|
||||
for (int i = 0; i < 10; i++)
|
||||
{
|
||||
// Find the next computer call action.
|
||||
ComputerCallResponseItem? computerCall = response.Messages
|
||||
.SelectMany(m => m.Contents)
|
||||
.Select(c => c.RawRepresentation as ComputerCallResponseItem)
|
||||
.FirstOrDefault(item => item is not null);
|
||||
|
||||
if (computerCall is null)
|
||||
{
|
||||
if (currentState == SearchState.PressedEnter)
|
||||
{
|
||||
Console.WriteLine("No more computer actions. Done.");
|
||||
Console.WriteLine(response);
|
||||
break;
|
||||
}
|
||||
|
||||
// Check if the agent is asking for confirmation to proceed, and if so, respond affirmatively.
|
||||
TextContent? textContent = response.Messages
|
||||
.Where(m => m.Role == ChatRole.Assistant)
|
||||
.SelectMany(m => m.Contents.OfType<TextContent>())
|
||||
.FirstOrDefault();
|
||||
|
||||
if (textContent?.Text is { } text && (
|
||||
text.Contains("Would you like me") ||
|
||||
text.Contains("Should I") ||
|
||||
text.Contains("proceed") ||
|
||||
text.Contains('?')))
|
||||
{
|
||||
response = await agent.RunAsync("Please proceed.", session, runOptions);
|
||||
continue;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
Console.WriteLine($"[{i + 1}] Action: {computerCall!.Action.Kind}");
|
||||
|
||||
// Simulate the action and get the resulting screenshot.
|
||||
(currentState, string fileId) = await ComputerUseUtil.GetScreenshotAsync(computerCall.Action, currentState, screenshots);
|
||||
|
||||
// Send the screenshot back as the computer call output.
|
||||
AIContent callOutput = new()
|
||||
{
|
||||
RawRepresentation = new ComputerCallOutputResponseItem(
|
||||
computerCall.CallId,
|
||||
output: ComputerCallOutput.CreateScreenshotOutput(screenshotImageFileId: fileId))
|
||||
};
|
||||
|
||||
response = await agent.RunAsync([new ChatMessage(ChatRole.User, [callOutput])], session: session, options: runOptions);
|
||||
}
|
||||
}
|
||||
finally
|
||||
{
|
||||
await ComputerUseUtil.EnsureDeleteScreenshotAssetsAsync(fileClient, screenshots);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,39 @@
|
||||
# Computer Use with the Responses API
|
||||
# Computer Use with the Responses API
|
||||
|
||||
This sample shows how to use the Computer Use tool with a `ChatClientAgent` using the Responses API directly.
|
||||
This sample shows how to use the Computer Use tool with `AIProjectClient.AsAIAgent(...)`.
|
||||
|
||||
## What this sample demonstrates
|
||||
|
||||
- Using `FoundryAITool.CreateComputerTool()` with `ChatClientAgent`
|
||||
- Using `FoundryAITool.CreateComputerTool()` to add computer use capabilities
|
||||
- Processing computer call actions (click, type, key press)
|
||||
- Managing the computer use interaction loop with screenshots
|
||||
- Handling the Azure Agents API workaround for `previous_response_id` with `computer_call_output`
|
||||
|
||||
For more information, see [Use the computer tool](https://learn.microsoft.com/en-us/azure/foundry/agents/how-to/tools/computer-use?pivots=csharp).
|
||||
|
||||
## How the simulation works
|
||||
|
||||
In a real computer use scenario, the model controls a virtual keyboard and mouse to interact with a live browser — typing text, clicking buttons, and pressing keys. The host application captures a screenshot after each action and sends it back to the model so it can decide what to do next.
|
||||
|
||||
**This sample does not connect to a real browser.** Instead, it intercepts the model's actions and returns pre-captured screenshots as if the actions were actually performed. No real typing, clicking, or key presses happen — the sample fakes the environment so you can explore the computer use protocol without any browser automation setup.
|
||||
|
||||
### State transitions
|
||||
|
||||
The model receives a screenshot as input, analyzes it, and responds with a computer action as output. The sample maps each action to a new state and returns the corresponding screenshot:
|
||||
|
||||
| Step | Model Action | What Happens | Screenshot Sent Back to Model |
|
||||
|------|-----------------|-------------------------------------------|--------------------------------------------------------------|
|
||||
| 1 | | Session starts with the user prompt | `cua_browser_search.jpg` — empty search page |
|
||||
| 2 | Click | Model clicks the search box to focus it | `cua_browser_search.jpg` — same page |
|
||||
| 3 | Type | Model types the search query into the box | `cua_search_typed.jpg` — search text visible in the box |
|
||||
| 3a | *(text response)* | Model may ask for confirmation instead of acting | `cua_search_typed.jpg` — same page |
|
||||
| 4 | KeyPress Enter | Model presses Enter to submit the search | `cua_search_results.jpg` — search results page |
|
||||
|
||||
### Interaction loop
|
||||
|
||||
1. The user prompt and the initial screenshot (`cua_browser_search.jpg` — an empty search page) are sent to the model as input.
|
||||
2. The model analyzes the screenshot and responds with a computer action (e.g., click on the search box to focus it, then type search text, then press Enter).
|
||||
3. The sample intercepts the action, advances the state, and sends back the next pre-captured screenshot as if the action was performed on a real browser.
|
||||
4. Steps 2–3 repeat until the model stops requesting actions or the iteration limit is reached.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
@@ -19,7 +45,7 @@ Set the following environment variables:
|
||||
|
||||
```powershell
|
||||
$env:AZURE_AI_PROJECT_ENDPOINT="https://your-foundry-service.services.ai.azure.com/api/projects/your-foundry-project"
|
||||
$env:AZURE_AI_MODEL_DEPLOYMENT_NAME="computer-use-preview"
|
||||
$env:AZURE_AI_COMPUTER_USE_DEPLOYMENT_NAME="computer-use-preview"
|
||||
```
|
||||
|
||||
## Run the sample
|
||||
|
||||
Reference in New Issue
Block a user