Skip to content

Commit

Permalink
DALL-E integration (#34)
Browse files Browse the repository at this point in the history
* DALL-E integration
    #27

* fix build

* First ready version of Dall-E

---------

Co-authored-by: Alexander <[email protected]>
  • Loading branch information
LXBdev and Alexander authored Dec 21, 2023
1 parent cbbf1e9 commit d0ad2f7
Showing 8 changed files with 299 additions and 1 deletion.
48 changes: 48 additions & 0 deletions OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor
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
};
}
}
59 changes: 59 additions & 0 deletions OpenAIChatGPTBlazor/Pages/GenerateImage.razor
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>

84 changes: 84 additions & 0 deletions OpenAIChatGPTBlazor/Pages/GenerateImage.razor.cs
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;
}
}
}
}
79 changes: 79 additions & 0 deletions OpenAIChatGPTBlazor/Pages/GenerateImage.razor.css
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 */
}
3 changes: 3 additions & 0 deletions OpenAIChatGPTBlazor/Shared/NavMenu.razor
Original file line number Diff line number Diff line change
@@ -13,6 +13,9 @@
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
<NavLink class="nav-link" href="GenerateImage" Match="NavLinkMatch.All">
<span class="oi oi-image" aria-hidden="true"></span> DALL-E
</NavLink>
</div>
</nav>
</div>
2 changes: 1 addition & 1 deletion Tests/UiTests/BasicTest.cs
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ namespace UiTests;
[TestFixture]
public class BasicTest : PageTest
{
public static string BaseUrl = Environment.GetEnvironmentVariable("AppUrl") ?? "http://blazorserver:80";
public static string BaseUrl = Environment.GetEnvironmentVariable("AppUrl") ?? "https://localhost:7128/";

[SetUp]
public async Task SetUp()
23 changes: 23 additions & 0 deletions Tests/UiTests/GenerateImageTests.cs
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();
}
}
2 changes: 2 additions & 0 deletions docker-compose.yml
Original file line number Diff line number Diff line change
@@ -18,6 +18,8 @@ services:
# working_dir: /tests/UiTests
depends_on:
- blazorserver
environment:
- AppUrl=http://blazorserver:80
# command:
# - /bin/bash
# - -c

0 comments on commit d0ad2f7

Please sign in to comment.