46 lines
1.9 KiB
HTML
46 lines
1.9 KiB
HTML
<div id="recipe-upload-container">
|
|
<h1>Upload Recipe</h1>
|
|
|
|
<section>
|
|
<h2>Auto-Complete Recipe (Optional)</h2>
|
|
<p>Choose a photo of a recipe from your files, and AI will fill out the form below for you.</p>
|
|
<form id="recipe-upload-form" [formGroup]="recipeUploadForm" (ngSubmit)="onFileSubmit()">
|
|
<input id="file" type="file" (change)="onFileChange($event)" />
|
|
<div class="action-buttons-container">
|
|
<button matButton="outlined" type="button" (click)="onClear()">Clear</button>
|
|
<button matButton="filled" type="submit" [disabled]="!recipeUploadForm.valid || inferenceInProgress()">
|
|
AI Auto-Complete
|
|
</button>
|
|
<app-spinner [enabled]="inferenceInProgress()"></app-spinner>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Recipe Form</h2>
|
|
<div id="recipe-form-and-source">
|
|
<form [formGroup]="recipeForm" (ngSubmit)="onRecipeSubmit()">
|
|
<mat-form-field>
|
|
<mat-label>Recipe Title</mat-label>
|
|
<input matInput id="recipe-title" type="text" formControlName="title" />
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label>Recipe Text</mat-label>
|
|
<textarea
|
|
matInput
|
|
id="recipe-text"
|
|
formControlName="recipeText"
|
|
(input)="onRecipeTextChange($event)"
|
|
></textarea>
|
|
</mat-form-field>
|
|
<button matButton="filled" type="submit" [disabled]="!recipeForm.valid || inferenceInProgress()">Add Recipe</button>
|
|
</form>
|
|
<div>
|
|
@if (sourceRecipeImage()) {
|
|
<img [src]="sourceRecipeImage()" alt="Your source recipe image." />
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|