-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
DALL-E integration (#34)
* DALL-E integration #27 * fix build * First ready version of Dall-E --------- Co-authored-by: Alexander <[email protected]>
- Loading branch information
Showing
8 changed files
with
299 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
@using Azure.AI.OpenAI | ||
<EditForm Model="@this"> | ||
<div class="form-group"> | ||
<InputTextArea class="form-control" placeholder="Prompt" @bind-Value="_prompt" /> | ||
</div> | ||
<div class="form-group"> | ||
<label for="size">Size</label> | ||
<InputSelect @bind-Value="_size"> | ||
<option value="1024x1024">1024x1024</option> | ||
<option value="1792x1024">1792x1024</option> | ||
<option value="1024x1792">1024x1792</option> | ||
</InputSelect> | ||
<label for="quality">Quality</label> | ||
<InputSelect id="quality" name="quality" @bind-Value="_quality"> | ||
<option value="standard">Standard</option> | ||
<option value="hd">HD</option> | ||
</InputSelect> | ||
<label for="style">Style</label> | ||
<InputSelect id="style" name="style" @bind-Value="_style"> | ||
<option value="natural">Natural</option> | ||
<option value="vivid">Vivid</option> | ||
</InputSelect> | ||
</div> | ||
</EditForm> | ||
|
||
|
||
@code { | ||
[Parameter] | ||
public string? DeploymentName { get; set; } | ||
|
||
private string _prompt = ""; | ||
private string _size = ImageSize.Size1024x1024.ToString(); | ||
private string _quality = ImageGenerationQuality.Standard.ToString(); | ||
private string _style = ImageGenerationStyle.Natural.ToString(); | ||
|
||
public ImageGenerationOptions AsAzureOptions(string deploymentName) | ||
{ | ||
return new() | ||
{ | ||
DeploymentName = deploymentName, | ||
Prompt = _prompt, | ||
ImageCount = 1, | ||
Size = _size, | ||
Quality = _quality, | ||
Style = _style | ||
}; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
@page "/GenerateImage" | ||
@using Azure.AI.OpenAI | ||
@using System.Globalization | ||
@using Microsoft.Extensions.Options; | ||
@using Microsoft.FeatureManagement; | ||
@using OpenAIChatGPTBlazor.Components | ||
@inject IConfiguration Configuration | ||
@inject OpenAIClient OpenAiClient | ||
@inject IJSRuntime JS | ||
@inject IFeatureManager FeatureManager | ||
@inject IOptionsMonitor<OpenAIOptions> OpenAIOptions | ||
|
||
<PageTitle>My DALL-E</PageTitle> | ||
|
||
<article> | ||
<div class="top-row p-4 header justify-content-between"> | ||
<h4> | ||
Welcome to my Image Generation using OpenAI | ||
</h4> | ||
</div> | ||
<div class="row main align-content-start p-4 img-container"> | ||
|
||
@if (_loading) | ||
{ | ||
<br /> | ||
<div class="loader"></div> | ||
<p>... please wait ...</p> | ||
} | ||
@if (_warningMessage.Length > 0) | ||
{ | ||
<div class="alert alert-warning"> | ||
<strong>Warning!</strong> @_warningMessage. | ||
</div> | ||
} | ||
|
||
<p>@_revisedPrompt</p> | ||
|
||
@if (_imageUrl is not null) | ||
{ | ||
<img src="@_imageUrl" class="img-fluid" /> | ||
} | ||
</div> | ||
<hr /> | ||
<div class="row footer"> | ||
<div class="col-sm-8"> | ||
<GenerateImageOptions @ref="_optionsComponent" DeploymentName="@_next" /> | ||
</div> | ||
<br /> | ||
<div class="col-sm-2"> | ||
<button id="submitBtn" class="btn btn-success" @onclick="OnSubmitClick" type="submit" disabled=@_loading> | ||
<i class="fas"></i>Submit | ||
</button> | ||
<button class="btn btn-danger" @onclick="OnAbortClick" type="submit" disabled="@(!_loading)"> | ||
<i class="fas"></i>Abort | ||
</button> | ||
</div> | ||
</div> | ||
</article> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
using Microsoft.AspNetCore.Components.Web; | ||
using OpenAIChatGPTBlazor.Components; | ||
|
||
namespace OpenAIChatGPTBlazor.Pages | ||
{ | ||
public partial class GenerateImage | ||
{ | ||
private CancellationTokenSource? _searchCancellationTokenSource; | ||
private string _warningMessage = string.Empty; | ||
private string _next = string.Empty; | ||
private bool _loading = true; | ||
private GenerateImageOptions _optionsComponent = new(); | ||
|
||
private Uri? _imageUrl = null; | ||
private string _revisedPrompt = string.Empty; | ||
|
||
protected override void OnAfterRender(bool firstRender) | ||
{ | ||
if (firstRender) | ||
{ | ||
_loading = false; | ||
this.StateHasChanged(); | ||
} | ||
} | ||
|
||
private async Task OnSubmitClick() | ||
{ | ||
await RunSubmit(); | ||
} | ||
|
||
private void OnAbortClick() | ||
{ | ||
AbortSearch(); | ||
} | ||
|
||
private async Task RunSubmit() | ||
{ | ||
try | ||
{ | ||
_loading = true; | ||
this.StateHasChanged(); | ||
|
||
_searchCancellationTokenSource = new CancellationTokenSource(); | ||
var res = await OpenAiClient.GetImageGenerationsAsync(_optionsComponent.AsAzureOptions("Dalle3"), _searchCancellationTokenSource.Token); | ||
|
||
foreach (var imageData in res.Value.Data) | ||
{ | ||
_imageUrl = imageData.Url; | ||
_revisedPrompt = imageData.RevisedPrompt; | ||
} | ||
|
||
_loading = false; | ||
_warningMessage = string.Empty; | ||
} | ||
catch (TaskCanceledException) when (_searchCancellationTokenSource?.IsCancellationRequested == true) | ||
{ | ||
// Gracefully handle cancellation | ||
} | ||
catch (Exception ex) | ||
{ | ||
_warningMessage = ex.Message; | ||
} | ||
finally | ||
{ | ||
_loading = false; | ||
} | ||
} | ||
|
||
private void AbortSearch() | ||
{ | ||
try | ||
{ | ||
if (_searchCancellationTokenSource?.Token != null && _searchCancellationTokenSource.Token.CanBeCanceled) | ||
{ | ||
_searchCancellationTokenSource.Cancel(); | ||
} | ||
} | ||
catch (Exception ex) | ||
{ | ||
_warningMessage = ex.Message; | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
article { | ||
min-height: 100%; | ||
max-height: 80vh; | ||
display: flex; | ||
flex-direction: column; | ||
} | ||
|
||
.main { | ||
overflow-y: scroll; | ||
-webkit-overflow-scrolling: touch; | ||
flex: auto; | ||
} | ||
|
||
.top-row { | ||
background-color: #f7f7f7; | ||
border-bottom: 1px solid #d6d5d5; | ||
justify-content: flex-end; | ||
height: 3.5rem; | ||
display: flex; | ||
align-items: center; | ||
} | ||
|
||
.top-row h4 { | ||
margin-top: 0.5rem | ||
} | ||
|
||
.top-row ::deep a, .top-row .btn-link { | ||
white-space: nowrap; | ||
margin-left: 1.5rem; | ||
} | ||
|
||
.top-row a:first-child { | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
} | ||
|
||
@media (max-width: 640.98px) { | ||
.top-row:not(.auth) { | ||
display: none; | ||
} | ||
|
||
.top-row.auth { | ||
justify-content: space-between; | ||
} | ||
|
||
.top-row a, .top-row .btn-link { | ||
margin-left: 0; | ||
} | ||
} | ||
|
||
@media (min-width: 1025px) { | ||
.top-row { | ||
position: sticky; | ||
top: 0; | ||
z-index: 1; | ||
} | ||
|
||
.top-row, article { | ||
padding-left: 2rem !important; | ||
padding-right: 1.5rem !important; | ||
} | ||
} | ||
|
||
|
||
#nextArea { | ||
margin-left: 6px; | ||
margin-bottom: 6px; | ||
} | ||
|
||
.img-container { | ||
max-width: 100%; /* Ensures the div doesn’t exceed the width of the screen */ | ||
height: auto; /* Optional: Ensures the height is auto-adjusted */ | ||
} | ||
|
||
.img-container img { | ||
max-width: 100%; /* Ensures the image doesn’t exceed the width of its container */ | ||
height: auto; /* Maintains the aspect ratio of the image */ | ||
display: block; /* Removes any extra space at the bottom inside the container */ | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
using Microsoft.Playwright; | ||
using Microsoft.Playwright.NUnit; | ||
using NUnit.Framework; | ||
|
||
namespace UiTests; | ||
|
||
[Parallelizable(ParallelScope.Self)] | ||
[TestFixture] | ||
public class GenerateImageTests : PageTest | ||
{ | ||
|
||
[SetUp] | ||
public async Task SetUp() | ||
{ | ||
await Page.GotoAsync(Path.Combine(BasicTest.BaseUrl, "GenerateImage")); | ||
} | ||
|
||
[Test] | ||
public async Task PageShouldLoadAndShowHeading() | ||
{ | ||
await Expect(Page.GetByText("Welcome to my Image Generation using OpenAI")).ToBeVisibleAsync(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters