Compare commits
No commits in common. "f673db572e27d5458ebcea81b746620438411a84" and "2bb206b8bf6086644a8307a72abdff18c38084e8" have entirely different histories.
f673db572e
...
2bb206b8bf
@ -14,7 +14,7 @@ export const routes: Routes = [
|
|||||||
component: RecipesSearchPage,
|
component: RecipesSearchPage,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'recipe-upload',
|
path: 'recipes-upload',
|
||||||
component: RecipeUploadPage,
|
component: RecipeUploadPage,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,25 +1,6 @@
|
|||||||
<div id="recipe-upload-container">
|
<div id="recipe-upload-container">
|
||||||
<h1>Upload Recipe</h1>
|
<h1>Upload Recipe</h1>
|
||||||
<app-recipe-upload-trail
|
|
||||||
[displayStep]="displayStep()"
|
|
||||||
[inProgressStep]="inProgressStep()"
|
|
||||||
[includeInfer]="includeInfer()"
|
|
||||||
(stepClick)="onStepClick($event)"
|
|
||||||
></app-recipe-upload-trail>
|
|
||||||
|
|
||||||
@if (displayStep() === RecipeUploadStep.START) {
|
|
||||||
<app-ai-or-manual
|
|
||||||
[sourceFile]="sourceFile()"
|
|
||||||
(sourceFileChange)="onSourceFileChange($event)"
|
|
||||||
(submitStep)="onAiOrManualSubmit($event)"
|
|
||||||
></app-ai-or-manual>
|
|
||||||
} @else if (displayStep() === RecipeUploadStep.INFER) {
|
|
||||||
<app-infer></app-infer>
|
|
||||||
} @else if (displayStep() === RecipeUploadStep.ENTER_DATA) {
|
|
||||||
<app-enter-recipe-data [model]="model()"></app-enter-recipe-data>
|
|
||||||
}
|
|
||||||
|
|
||||||
<!--
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Auto-Complete Recipe (Optional)</h2>
|
<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>
|
<p>Choose a photo of a recipe from your files, and AI will fill out the form below for you.</p>
|
||||||
@ -61,5 +42,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
-->
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,212 +1,100 @@
|
|||||||
import { Component, computed, inject, OnInit, signal } from '@angular/core';
|
import { Component, inject, signal } from '@angular/core';
|
||||||
import { ReactiveFormsModule } from '@angular/forms';
|
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||||
import { AiOrManual } from './steps/ai-or-manual/ai-or-manual';
|
import { SseClient } from 'ngx-sse-client';
|
||||||
import { AIOrManualSubmitEvent } from './steps/ai-or-manual/AIOrManualSubmitEvent';
|
import { Spinner } from '../../shared/components/spinner/spinner';
|
||||||
import { Infer } from './steps/infer/infer';
|
import { MatButton } from '@angular/material/button';
|
||||||
import { EnterRecipeData } from './steps/enter-recipe-data/enter-recipe-data';
|
import { MatFormField, MatInput, MatLabel } from '@angular/material/input';
|
||||||
import { RecipeUploadTrail } from './recipe-upload-trail/recipe-upload-trail';
|
|
||||||
import { ActivatedRoute, Router } from '@angular/router';
|
|
||||||
import { StepClickEvent } from './recipe-upload-trail/StepClickEvent';
|
|
||||||
import { RecipeUploadModel } from '../../shared/client-models/RecipeUploadModel';
|
|
||||||
import { RecipeUploadService } from '../../shared/services/RecipeUploadService';
|
|
||||||
import { RecipeUploadStep } from '../../shared/client-models/RecipeUploadStep';
|
|
||||||
import { FileUploadEvent } from '../../shared/components/file-upload/FileUploadEvent';
|
|
||||||
import { tryMaybeInt } from '../../shared/util';
|
|
||||||
import { from, map, switchMap, tap } from 'rxjs';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-recipe-upload-page',
|
selector: 'app-recipe-upload-page',
|
||||||
imports: [ReactiveFormsModule, AiOrManual, Infer, EnterRecipeData, RecipeUploadTrail],
|
imports: [ReactiveFormsModule, Spinner, MatButton, MatFormField, MatInput, MatLabel],
|
||||||
templateUrl: './recipe-upload-page.html',
|
templateUrl: './recipe-upload-page.html',
|
||||||
styleUrl: './recipe-upload-page.css',
|
styleUrl: './recipe-upload-page.css',
|
||||||
})
|
})
|
||||||
export class RecipeUploadPage implements OnInit {
|
export class RecipeUploadPage {
|
||||||
protected readonly model = signal<RecipeUploadModel>({
|
private readonly sseClient = inject(SseClient);
|
||||||
inProgressStep: RecipeUploadStep.START,
|
private readonly formBuilder = inject(FormBuilder);
|
||||||
|
|
||||||
|
protected readonly sourceRecipeImage = signal<string | null>(null);
|
||||||
|
protected readonly inferenceInProgress = signal(false);
|
||||||
|
|
||||||
|
protected readonly recipeUploadForm = this.formBuilder.group({
|
||||||
|
file: this.formBuilder.control<File | null>(null, [Validators.required]),
|
||||||
});
|
});
|
||||||
|
|
||||||
protected readonly displayStep = signal<number>(RecipeUploadStep.START);
|
protected readonly recipeForm = new FormGroup({
|
||||||
protected readonly inProgressStep = computed(() => this.model().inProgressStep);
|
title: new FormControl('', [Validators.required]),
|
||||||
protected readonly includeInfer = signal(false);
|
recipeText: new FormControl('', Validators.required),
|
||||||
protected readonly sourceFile = computed(() => this.model().sourceFile ?? null);
|
});
|
||||||
|
|
||||||
private readonly router = inject(Router);
|
protected onClear() {
|
||||||
private readonly activatedRoute = inject(ActivatedRoute);
|
this.recipeUploadForm.reset();
|
||||||
private readonly recipeUploadService = inject(RecipeUploadService);
|
this.sourceRecipeImage.set(null);
|
||||||
|
}
|
||||||
|
|
||||||
public ngOnInit(): void {
|
protected onFileChange(event: Event) {
|
||||||
this.activatedRoute.queryParamMap
|
const fileInput = event.target as HTMLInputElement;
|
||||||
.pipe(
|
if (fileInput.files && fileInput.files.length) {
|
||||||
map((paramMap) => {
|
const file = fileInput.files[0];
|
||||||
const draftIdParam: string | null = paramMap.get('draftId');
|
this.recipeUploadForm.controls.file.setValue(file);
|
||||||
const draftId = tryMaybeInt(draftIdParam);
|
this.recipeUploadForm.controls.file.markAsTouched();
|
||||||
const stepParam: string | null = paramMap.get('step');
|
this.recipeUploadForm.controls.file.updateValueAndValidity();
|
||||||
const step = tryMaybeInt(stepParam);
|
|
||||||
return [draftId, step];
|
// set source image
|
||||||
}),
|
this.sourceRecipeImage.set(URL.createObjectURL(file));
|
||||||
switchMap(([draftId, step]) => {
|
}
|
||||||
const currentModel = this.model();
|
}
|
||||||
if (draftId !== null && currentModel.id !== draftId) {
|
|
||||||
return this.recipeUploadService.getRecipeUploadModel(draftId).pipe(
|
protected onFileSubmit() {
|
||||||
tap((updatedModel) => {
|
const rawValue = this.recipeUploadForm.getRawValue();
|
||||||
this.model.set(updatedModel);
|
|
||||||
}),
|
this.inferenceInProgress.set(true);
|
||||||
switchMap((updatedModel) => {
|
|
||||||
if (step !== null && step <= updatedModel.inProgressStep) {
|
// upload form data
|
||||||
return from(this.changeDisplayStep(step));
|
const formData = new FormData();
|
||||||
} else {
|
formData.append('recipeImageFile', rawValue.file!, rawValue.file!.name);
|
||||||
return from(this.changeDisplayStep(updatedModel.inProgressStep));
|
this.sseClient
|
||||||
}
|
.stream(
|
||||||
}),
|
`http://localhost:8080/inferences/recipe-extract-stream`,
|
||||||
);
|
{
|
||||||
} else if (step !== null && step <= currentModel.inProgressStep) {
|
keepAlive: false,
|
||||||
return from(this.changeDisplayStep(step));
|
reconnectionDelay: 1000,
|
||||||
} else {
|
responseType: 'event',
|
||||||
return from(this.changeDisplayStep(RecipeUploadStep.START));
|
},
|
||||||
}
|
{
|
||||||
}),
|
body: formData,
|
||||||
|
},
|
||||||
|
'PUT',
|
||||||
)
|
)
|
||||||
.subscribe();
|
.subscribe({
|
||||||
}
|
next: (event) => {
|
||||||
|
if (event.type === 'error') {
|
||||||
|
const errorEvent = event as ErrorEvent;
|
||||||
|
console.error(errorEvent.error, errorEvent.message);
|
||||||
|
} else {
|
||||||
|
const messageEvent = event as MessageEvent;
|
||||||
|
const data: { delta: string } = JSON.parse(messageEvent.data);
|
||||||
|
this.recipeForm.patchValue({
|
||||||
|
recipeText: this.recipeForm.value.recipeText + data.delta,
|
||||||
|
});
|
||||||
|
|
||||||
private async changeDisplayStep(targetStep: number): Promise<void> {
|
// must do this so we auto-resize the textarea
|
||||||
this.displayStep.set(targetStep);
|
document.getElementById('recipe-text')?.dispatchEvent(new Event('input', { bubbles: true }));
|
||||||
await this.router.navigate([], {
|
}
|
||||||
relativeTo: this.activatedRoute,
|
},
|
||||||
queryParams: {
|
complete: () => {
|
||||||
step: targetStep,
|
this.inferenceInProgress.set(false);
|
||||||
draftId: this.model().id,
|
},
|
||||||
},
|
|
||||||
queryParamsHandling: 'merge',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
protected async onStepClick(event: StepClickEvent): Promise<void> {
|
|
||||||
await this.changeDisplayStep(event.step);
|
|
||||||
}
|
|
||||||
|
|
||||||
protected onSourceFileChange(event: FileUploadEvent) {
|
|
||||||
if (event._tag === 'file-add-event') {
|
|
||||||
this.model.update((model) => ({
|
|
||||||
...model,
|
|
||||||
sourceFile: event.file,
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
this.model.update((model) => ({
|
|
||||||
...model,
|
|
||||||
sourceFile: null,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
protected async onAiOrManualSubmit(event: AIOrManualSubmitEvent): Promise<void> {
|
|
||||||
if (event.mode === 'manual') {
|
|
||||||
this.model.update((model) => ({
|
|
||||||
...model,
|
|
||||||
sourceFile: null,
|
|
||||||
inProgressStep: RecipeUploadStep.ENTER_DATA,
|
|
||||||
}));
|
|
||||||
await this.changeDisplayStep(RecipeUploadStep.ENTER_DATA);
|
|
||||||
this.includeInfer.set(false);
|
|
||||||
} else {
|
|
||||||
this.model.update((model) => ({
|
|
||||||
...model,
|
|
||||||
sourceFile: this.sourceFile(),
|
|
||||||
inProgressStep: RecipeUploadStep.INFER,
|
|
||||||
}));
|
|
||||||
await this.changeDisplayStep(RecipeUploadStep.INFER);
|
|
||||||
this.includeInfer.set(true);
|
|
||||||
this.recipeUploadService.doInference(this.model()).subscribe((updatedModel) => {
|
|
||||||
this.model.set(updatedModel);
|
|
||||||
this.changeDisplayStep(RecipeUploadStep.ENTER_DATA);
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// private readonly sseClient = inject(SseClient);
|
protected onRecipeSubmit() {
|
||||||
// private readonly formBuilder = inject(FormBuilder);
|
console.log(this.recipeForm.value);
|
||||||
//
|
}
|
||||||
// protected readonly sourceRecipeImage = signal<string | null>(null);
|
|
||||||
// protected readonly inferenceInProgress = signal(false);
|
protected onRecipeTextChange(event: Event) {
|
||||||
//
|
const textarea = event.target as HTMLTextAreaElement;
|
||||||
// protected readonly recipeUploadForm = this.formBuilder.group({
|
textarea.style.height = 'auto';
|
||||||
// file: this.formBuilder.control<File | null>(null, [Validators.required]),
|
textarea.style.height = textarea.scrollHeight + 'px';
|
||||||
// });
|
}
|
||||||
//
|
|
||||||
// protected readonly recipeForm = new FormGroup({
|
|
||||||
// title: new FormControl('', [Validators.required]),
|
|
||||||
// recipeText: new FormControl('', Validators.required),
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// protected onClear() {
|
|
||||||
// this.recipeUploadForm.reset();
|
|
||||||
// this.sourceRecipeImage.set(null);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// protected onFileChange(event: Event) {
|
|
||||||
// const fileInput = event.target as HTMLInputElement;
|
|
||||||
// if (fileInput.files && fileInput.files.length) {
|
|
||||||
// const file = fileInput.files[0];
|
|
||||||
// this.recipeUploadForm.controls.file.setValue(file);
|
|
||||||
// this.recipeUploadForm.controls.file.markAsTouched();
|
|
||||||
// this.recipeUploadForm.controls.file.updateValueAndValidity();
|
|
||||||
//
|
|
||||||
// // set source image
|
|
||||||
// this.sourceRecipeImage.set(URL.createObjectURL(file));
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// protected onFileSubmit() {
|
|
||||||
// const rawValue = this.recipeUploadForm.getRawValue();
|
|
||||||
//
|
|
||||||
// this.inferenceInProgress.set(true);
|
|
||||||
//
|
|
||||||
// // upload form data
|
|
||||||
// const formData = new FormData();
|
|
||||||
// formData.append('recipeImageFile', rawValue.file!, rawValue.file!.name);
|
|
||||||
// this.sseClient
|
|
||||||
// .stream(
|
|
||||||
// `http://localhost:8080/inferences/recipe-extract-stream`,
|
|
||||||
// {
|
|
||||||
// keepAlive: false,
|
|
||||||
// reconnectionDelay: 1000,
|
|
||||||
// responseType: 'event',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// body: formData,
|
|
||||||
// },
|
|
||||||
// 'PUT',
|
|
||||||
// )
|
|
||||||
// .subscribe({
|
|
||||||
// next: (event) => {
|
|
||||||
// if (event.type === 'error') {
|
|
||||||
// const errorEvent = event as ErrorEvent;
|
|
||||||
// console.error(errorEvent.error, errorEvent.message);
|
|
||||||
// } else {
|
|
||||||
// const messageEvent = event as MessageEvent;
|
|
||||||
// const data: { delta: string } = JSON.parse(messageEvent.data);
|
|
||||||
// this.recipeForm.patchValue({
|
|
||||||
// recipeText: this.recipeForm.value.recipeText + data.delta,
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// // must do this so we auto-resize the textarea
|
|
||||||
// document.getElementById('recipe-text')?.dispatchEvent(new Event('input', { bubbles: true }));
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// complete: () => {
|
|
||||||
// this.inferenceInProgress.set(false);
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// protected onRecipeSubmit() {
|
|
||||||
// console.log(this.recipeForm.value);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// protected onRecipeTextChange(event: Event) {
|
|
||||||
// const textarea = event.target as HTMLTextAreaElement;
|
|
||||||
// textarea.style.height = 'auto';
|
|
||||||
// textarea.style.height = textarea.scrollHeight + 'px';
|
|
||||||
// }
|
|
||||||
protected readonly RecipeUploadStep = RecipeUploadStep;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
export interface StepClickEvent {
|
|
||||||
step: number;
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
#recipe-upload-steps {
|
|
||||||
display: flex;
|
|
||||||
list-style-type: none;
|
|
||||||
margin-block: 0;
|
|
||||||
padding-inline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#recipe-upload-steps li {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#recipe-upload-steps li:not(:first-child)::before {
|
|
||||||
content: ">";
|
|
||||||
padding-inline: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-complete,
|
|
||||||
.step-in-progress {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-in-progress {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-incomplete {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-displayed {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<ul id="recipe-upload-steps">
|
|
||||||
@for (step of steps(); track step.index) {
|
|
||||||
<li
|
|
||||||
[class]="{
|
|
||||||
'step-complete': step.completed,
|
|
||||||
'step-in-progress': step.inProgress,
|
|
||||||
'step-incomplete': !step.completed,
|
|
||||||
'step-displayed': displayStep() === step.index
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
@if (step.completed || step.inProgress) {
|
|
||||||
<a (click)="onStepClick(step.index)">{{ step.name }}</a>
|
|
||||||
} @else {
|
|
||||||
{{ step.name }}
|
|
||||||
}
|
|
||||||
</li>
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { RecipeUploadTrail } from './recipe-upload-trail';
|
|
||||||
|
|
||||||
describe('RecipeUploadTrail', () => {
|
|
||||||
let component: RecipeUploadTrail;
|
|
||||||
let fixture: ComponentFixture<RecipeUploadTrail>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
imports: [RecipeUploadTrail],
|
|
||||||
}).compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(RecipeUploadTrail);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
await fixture.whenStable();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
import { Component, computed, input, output } from '@angular/core';
|
|
||||||
import { StepClickEvent } from './StepClickEvent';
|
|
||||||
import { RecipeUploadStep } from '../../../shared/client-models/RecipeUploadStep';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-recipe-upload-trail',
|
|
||||||
imports: [],
|
|
||||||
templateUrl: './recipe-upload-trail.html',
|
|
||||||
styleUrl: './recipe-upload-trail.css',
|
|
||||||
})
|
|
||||||
export class RecipeUploadTrail {
|
|
||||||
public readonly displayStep = input.required<RecipeUploadStep>();
|
|
||||||
public readonly inProgressStep = input.required<RecipeUploadStep>();
|
|
||||||
public readonly includeInfer = input.required<boolean>();
|
|
||||||
|
|
||||||
public readonly stepClick = output<StepClickEvent>();
|
|
||||||
|
|
||||||
protected readonly steps = computed(() => {
|
|
||||||
const base: {
|
|
||||||
index: RecipeUploadStep;
|
|
||||||
name: string;
|
|
||||||
completed: boolean;
|
|
||||||
inProgress: boolean;
|
|
||||||
}[] = [
|
|
||||||
{
|
|
||||||
index: RecipeUploadStep.START,
|
|
||||||
name: 'Start',
|
|
||||||
completed: this.inProgressStep() > RecipeUploadStep.START,
|
|
||||||
inProgress: this.inProgressStep() === RecipeUploadStep.START,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
index: RecipeUploadStep.ENTER_DATA,
|
|
||||||
name: 'Enter Recipe',
|
|
||||||
completed: this.inProgressStep() > RecipeUploadStep.ENTER_DATA,
|
|
||||||
inProgress: this.inProgressStep() === RecipeUploadStep.ENTER_DATA,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
if (this.includeInfer()) {
|
|
||||||
base.push({
|
|
||||||
index: RecipeUploadStep.INFER,
|
|
||||||
name: 'Infer',
|
|
||||||
completed: this.inProgressStep() > RecipeUploadStep.INFER,
|
|
||||||
inProgress: this.inProgressStep() === RecipeUploadStep.INFER,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
base.sort((a, b) => a.index - b.index);
|
|
||||||
return base;
|
|
||||||
});
|
|
||||||
|
|
||||||
protected onStepClick(stepIndex: number) {
|
|
||||||
this.stepClick.emit({ step: stepIndex });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
export interface AIOrManualSubmitEvent {
|
|
||||||
mode: 'manual' | 'ai-assist';
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<section>
|
|
||||||
<h2>Start</h2>
|
|
||||||
<p>Either upload a photo of a recipe and AI will assist you, or enter your recipe manually.</p>
|
|
||||||
<form id="ai-or-manual-form">
|
|
||||||
<app-file-upload [files]="sourceFilesArray()" (fileChange)="onFileChange($event)"></app-file-upload>
|
|
||||||
<div id="ai-or-manual-buttons">
|
|
||||||
<button matButton="outlined" type="button" (click)="onFormSubmit('manual')">Enter Manually</button>
|
|
||||||
<button matButton="filled" type="button" [disabled]="!sourceFile()" (click)="onFormSubmit('ai-assist')">Use AI Assist</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { AiOrManual } from './ai-or-manual';
|
|
||||||
|
|
||||||
describe('AiOrManual', () => {
|
|
||||||
let component: AiOrManual;
|
|
||||||
let fixture: ComponentFixture<AiOrManual>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
imports: [AiOrManual],
|
|
||||||
}).compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(AiOrManual);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
await fixture.whenStable();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import { Component, computed, input, output } from '@angular/core';
|
|
||||||
import { MatButton } from '@angular/material/button';
|
|
||||||
import { ReactiveFormsModule } from '@angular/forms';
|
|
||||||
import { AIOrManualSubmitEvent } from './AIOrManualSubmitEvent';
|
|
||||||
import { FileUpload } from '../../../../shared/components/file-upload/file-upload';
|
|
||||||
import { FileUploadEvent } from '../../../../shared/components/file-upload/FileUploadEvent';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-ai-or-manual',
|
|
||||||
imports: [MatButton, ReactiveFormsModule, FileUpload],
|
|
||||||
templateUrl: './ai-or-manual.html',
|
|
||||||
styleUrl: './ai-or-manual.css',
|
|
||||||
})
|
|
||||||
export class AiOrManual {
|
|
||||||
public sourceFile = input.required<File | null>();
|
|
||||||
public sourceFileChange = output<FileUploadEvent>();
|
|
||||||
public submitStep = output<AIOrManualSubmitEvent>();
|
|
||||||
|
|
||||||
protected readonly sourceFilesArray = computed(() => {
|
|
||||||
const maybeSourceFile = this.sourceFile();
|
|
||||||
if (maybeSourceFile) {
|
|
||||||
return [maybeSourceFile];
|
|
||||||
} else {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
protected onFileChange(event: FileUploadEvent) {
|
|
||||||
this.sourceFileChange.emit(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
protected onFormSubmit(mode: 'manual' | 'ai-assist') {
|
|
||||||
this.submitStep.emit({ mode });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 60ch;
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<h2>Enter Recipe</h2>
|
|
||||||
<form [formGroup]="recipeFormGroup">
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-label>Title</mat-label>
|
|
||||||
<input matInput [formControl]="recipeFormGroup.controls.title">
|
|
||||||
</mat-form-field>
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-label>Slug</mat-label>
|
|
||||||
<input matInput [formControl]="recipeFormGroup.controls.slug">
|
|
||||||
</mat-form-field>
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-label>Recipe Text</mat-label>
|
|
||||||
<textarea matInput [formControl]="recipeFormGroup.controls.text"></textarea>
|
|
||||||
</mat-form-field>
|
|
||||||
</form>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { EnterRecipeData } from './enter-recipe-data';
|
|
||||||
|
|
||||||
describe('EnterRecipeData', () => {
|
|
||||||
let component: EnterRecipeData;
|
|
||||||
let fixture: ComponentFixture<EnterRecipeData>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
imports: [EnterRecipeData],
|
|
||||||
}).compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(EnterRecipeData);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
await fixture.whenStable();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
import { Component, input, OnInit } from '@angular/core';
|
|
||||||
import { RecipeUploadModel } from '../../../../shared/client-models/RecipeUploadModel';
|
|
||||||
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
||||||
import { MatFormField, MatInput, MatLabel } from '@angular/material/input';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-enter-recipe-data',
|
|
||||||
imports: [ReactiveFormsModule, MatFormField, MatLabel, MatInput],
|
|
||||||
templateUrl: './enter-recipe-data.html',
|
|
||||||
styleUrl: './enter-recipe-data.css',
|
|
||||||
})
|
|
||||||
export class EnterRecipeData implements OnInit {
|
|
||||||
public readonly model = input.required<RecipeUploadModel>();
|
|
||||||
|
|
||||||
public ngOnInit(): void {
|
|
||||||
const model = this.model();
|
|
||||||
this.recipeFormGroup.patchValue({
|
|
||||||
title: model.userTitle ?? model.inferredTitle ?? '',
|
|
||||||
slug: model.userSlug ?? model.inferredSlug ?? '',
|
|
||||||
text: model.userText ?? model.inferredText ?? '',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
protected readonly recipeFormGroup = new FormGroup({
|
|
||||||
title: new FormControl('', Validators.required),
|
|
||||||
slug: new FormControl('', Validators.required),
|
|
||||||
text: new FormControl('', Validators.required),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
<p>Using AI to read your recipe...</p>
|
|
||||||
<app-spinner></app-spinner>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { Infer } from './infer';
|
|
||||||
|
|
||||||
describe('Infer', () => {
|
|
||||||
let component: Infer;
|
|
||||||
let fixture: ComponentFixture<Infer>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
imports: [Infer],
|
|
||||||
}).compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(Infer);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
await fixture.whenStable();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
import { Spinner } from '../../../../shared/components/spinner/spinner';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-infer',
|
|
||||||
imports: [Spinner],
|
|
||||||
templateUrl: './infer.html',
|
|
||||||
styleUrl: './infer.css',
|
|
||||||
})
|
|
||||||
export class Infer {}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export interface RecipeUploadIngredientModel {
|
|
||||||
amount: string | null;
|
|
||||||
name: string;
|
|
||||||
notes: string | null;
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import { RecipeUploadIngredientModel } from './RecipeUploadIngredientModel';
|
|
||||||
import { RecipeUploadStep } from './RecipeUploadStep';
|
|
||||||
|
|
||||||
export interface RecipeUploadModel {
|
|
||||||
inProgressStep: RecipeUploadStep;
|
|
||||||
|
|
||||||
id?: number | null;
|
|
||||||
sourceFile?: File | null;
|
|
||||||
|
|
||||||
inferredText?: string | null;
|
|
||||||
inferredIngredients?: RecipeUploadIngredientModel[] | null;
|
|
||||||
inferredTitle?: string | null;
|
|
||||||
inferredSlug?: string | null;
|
|
||||||
|
|
||||||
userText?: string | null;
|
|
||||||
userIngredients?: RecipeUploadIngredientModel[] | null;
|
|
||||||
userTitle?: string | null;
|
|
||||||
userSlug?: string | null;
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export enum RecipeUploadStep {
|
|
||||||
START,
|
|
||||||
INFER,
|
|
||||||
ENTER_DATA,
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
export type FileUploadEvent = FileAddEvent | FileRemoveEvent;
|
|
||||||
|
|
||||||
export interface FileAddEvent {
|
|
||||||
_tag: 'file-add-event';
|
|
||||||
file: File;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FileRemoveEvent {
|
|
||||||
_tag: 'file-remove-event';
|
|
||||||
fileName: string;
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
.file-input-container {
|
|
||||||
display: flex;
|
|
||||||
column-gap: 10px;
|
|
||||||
padding-block: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-name {
|
|
||||||
display: flex;
|
|
||||||
column-gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
fa-icon {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<input #fileInput type="file" (change)="onFileChange($event)" style="display: none" />
|
|
||||||
<div class="file-input-container">
|
|
||||||
<fa-icon [icon]="faFileUpload" size="3x" (click)="onFileUploadIconClick(fileInput)"></fa-icon>
|
|
||||||
@if (fileNames().length) {
|
|
||||||
@for (fileName of fileNames(); track $index) {
|
|
||||||
<p class="file-name"><fa-icon [icon]="faCancel" (click)="onClear(fileName)"></fa-icon>{{ fileName }}</p>
|
|
||||||
}
|
|
||||||
} @else {
|
|
||||||
<p>Click the icon to choose a file.</p>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { FileUpload } from './file-upload';
|
|
||||||
|
|
||||||
describe('FileUpload', () => {
|
|
||||||
let component: FileUpload;
|
|
||||||
let fixture: ComponentFixture<FileUpload>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
imports: [FileUpload],
|
|
||||||
}).compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(FileUpload);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
await fixture.whenStable();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
import { Component, computed, input, output } from '@angular/core';
|
|
||||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
|
||||||
import { faCancel, faFileUpload } from '@fortawesome/free-solid-svg-icons';
|
|
||||||
import { FileUploadEvent } from './FileUploadEvent';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-file-upload',
|
|
||||||
imports: [FaIconComponent],
|
|
||||||
templateUrl: './file-upload.html',
|
|
||||||
styleUrl: './file-upload.css',
|
|
||||||
})
|
|
||||||
export class FileUpload {
|
|
||||||
public readonly files = input<File[]>([]);
|
|
||||||
public readonly fileChange = output<FileUploadEvent>();
|
|
||||||
|
|
||||||
protected fileNames = computed(() => this.files().map((file) => file.name));
|
|
||||||
|
|
||||||
protected onFileUploadIconClick(target: HTMLInputElement) {
|
|
||||||
target.click();
|
|
||||||
}
|
|
||||||
|
|
||||||
protected onClear(fileName: string): void {
|
|
||||||
this.fileChange.emit({
|
|
||||||
_tag: 'file-remove-event',
|
|
||||||
fileName,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
protected onFileChange(event: Event) {
|
|
||||||
const fileInput = event.target as HTMLInputElement;
|
|
||||||
if (fileInput.files && fileInput.files.length) {
|
|
||||||
this.fileChange.emit({
|
|
||||||
_tag: 'file-add-event',
|
|
||||||
file: fileInput.files[0],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
fileInput.value = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
protected readonly faFileUpload = faFileUpload;
|
|
||||||
protected readonly faCancel = faCancel;
|
|
||||||
}
|
|
||||||
@ -3,11 +3,11 @@
|
|||||||
@if (isLoggedIn()) {
|
@if (isLoggedIn()) {
|
||||||
<div id="header-login">
|
<div id="header-login">
|
||||||
<p>Welcome {{ username() }}!</p>
|
<p>Welcome {{ username() }}!</p>
|
||||||
<button matButton="elevated" (click)="logoutClick()">Logout</button>
|
<button matButton="tonal" (click)="logoutClick()">Logout</button>
|
||||||
</div>
|
</div>
|
||||||
} @else {
|
} @else {
|
||||||
<div id="header-login">
|
<div id="header-login">
|
||||||
<button matButton="elevated" (click)="loginClick()">Login</button>
|
<button matButton="tonal" (click)="loginClick()">Login</button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -3,6 +3,6 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li><a [routerLink]="'/'">Browse Recipes</a></li>
|
<li><a [routerLink]="'/'">Browse Recipes</a></li>
|
||||||
<li><a [routerLink]="'/recipes-search'">Search Recipes</a></li>
|
<li><a [routerLink]="'/recipes-search'">Search Recipes</a></li>
|
||||||
<li><a [routerLink]="'/recipe-upload'">Upload Recipe</a></li>
|
<li><a [routerLink]="'/recipes-upload'">Upload Recipe</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -7,5 +7,5 @@ import { Component, input } from '@angular/core';
|
|||||||
styleUrl: './spinner.css',
|
styleUrl: './spinner.css',
|
||||||
})
|
})
|
||||||
export class Spinner {
|
export class Spinner {
|
||||||
public readonly enabled = input(true);
|
public readonly enabled = input.required<boolean>();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,31 +0,0 @@
|
|||||||
import { inject, Injectable } from '@angular/core';
|
|
||||||
import { HttpClient } from '@angular/common/http';
|
|
||||||
import { delay, Observable, of } from 'rxjs';
|
|
||||||
import { RecipeUploadModel } from '../client-models/RecipeUploadModel';
|
|
||||||
import { RecipeUploadStep } from '../client-models/RecipeUploadStep';
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root',
|
|
||||||
})
|
|
||||||
export class RecipeUploadService {
|
|
||||||
private readonly http = inject(HttpClient);
|
|
||||||
|
|
||||||
public getRecipeUploadModel(draftId: number): Observable<RecipeUploadModel> {
|
|
||||||
return of({
|
|
||||||
inProgressStep: RecipeUploadStep.ENTER_DATA,
|
|
||||||
id: 42
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
public doInference(model: RecipeUploadModel): Observable<RecipeUploadModel> {
|
|
||||||
return of({
|
|
||||||
inProgressStep: RecipeUploadStep.ENTER_DATA,
|
|
||||||
id: 16,
|
|
||||||
inferredTitle: 'Some recipe',
|
|
||||||
inferredSlug: 'some-recipe',
|
|
||||||
inferredText: 'Some text.',
|
|
||||||
inferredIngredients: []
|
|
||||||
}).pipe(delay(5_000));
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
export const tryInt = (s: string): number | null => {
|
|
||||||
try {
|
|
||||||
return parseInt(s);
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const tryMaybeInt = (maybeString: string | null): number | null => {
|
|
||||||
if (maybeString) {
|
|
||||||
try {
|
|
||||||
return parseInt(maybeString);
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const hasValue = <T>(value?: T | null): value is T => {
|
|
||||||
return value !== undefined && value !== null;
|
|
||||||
};
|
|
||||||
@ -20,11 +20,9 @@ html {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mat.form-field-overrides(
|
@include mat.form-field-overrides((
|
||||||
(
|
filled-container-color: var(--mat-sys-surface-variant),
|
||||||
filled-container-color: var(--mat-sys-surface-variant),
|
));
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
// Default the application to a light color theme. This can be changed to
|
// Default the application to a light color theme. This can be changed to
|
||||||
|
|||||||
@ -1,136 +1,136 @@
|
|||||||
// This file was generated by running 'ng generate @angular/material:theme-color'.
|
// This file was generated by running 'ng generate @angular/material:theme-color'.
|
||||||
// Proceed with caution if making changes to this file.
|
// Proceed with caution if making changes to this file.
|
||||||
|
|
||||||
@use "sass:map";
|
@use 'sass:map';
|
||||||
@use "@angular/material" as mat;
|
@use '@angular/material' as mat;
|
||||||
|
|
||||||
// Note: Color palettes are generated from primary: #91351d, secondary: #ffb61d, neutral: #aaa, neutral variant: #252525
|
// Note: Color palettes are generated from primary: #91351d, secondary: #ffb61d, neutral: #aaa, neutral variant: #252525
|
||||||
$_palettes: (
|
$_palettes: (
|
||||||
primary: (
|
primary: (
|
||||||
0: #000000,
|
0: #000000,
|
||||||
10: #3c0800,
|
10: #3c0800,
|
||||||
20: #611200,
|
20: #611200,
|
||||||
25: #711e07,
|
25: #711e07,
|
||||||
30: #802912,
|
30: #802912,
|
||||||
35: #90341c,
|
35: #90341c,
|
||||||
40: #a04027,
|
40: #a04027,
|
||||||
50: #c0573c,
|
50: #c0573c,
|
||||||
60: #e07053,
|
60: #e07053,
|
||||||
70: #ff8b6d,
|
70: #ff8b6d,
|
||||||
80: #ffb4a2,
|
80: #ffb4a2,
|
||||||
90: #ffdbd2,
|
90: #ffdbd2,
|
||||||
95: #ffede9,
|
95: #ffede9,
|
||||||
98: #fff8f6,
|
98: #fff8f6,
|
||||||
99: #fffbff,
|
99: #fffbff,
|
||||||
100: #ffffff,
|
100: #ffffff,
|
||||||
),
|
),
|
||||||
secondary: (
|
secondary: (
|
||||||
0: #000000,
|
0: #000000,
|
||||||
10: #281900,
|
10: #281900,
|
||||||
20: #432c00,
|
20: #432c00,
|
||||||
25: #513600,
|
25: #513600,
|
||||||
30: #5f4100,
|
30: #5f4100,
|
||||||
35: #6f4c00,
|
35: #6f4c00,
|
||||||
40: #7e5700,
|
40: #7e5700,
|
||||||
50: #9e6e00,
|
50: #9e6e00,
|
||||||
60: #bf8600,
|
60: #bf8600,
|
||||||
70: #e29f00,
|
70: #e29f00,
|
||||||
80: #ffba36,
|
80: #ffba36,
|
||||||
90: #ffdeac,
|
90: #ffdeac,
|
||||||
95: #ffeed9,
|
95: #ffeed9,
|
||||||
98: #fff8f3,
|
98: #fff8f3,
|
||||||
99: #fffbff,
|
99: #fffbff,
|
||||||
100: #ffffff,
|
100: #ffffff,
|
||||||
),
|
),
|
||||||
tertiary: (
|
tertiary: (
|
||||||
0: #000000,
|
0: #000000,
|
||||||
10: #241a00,
|
10: #241a00,
|
||||||
20: #3d2f00,
|
20: #3d2f00,
|
||||||
25: #4a3900,
|
25: #4a3900,
|
||||||
30: #584400,
|
30: #584400,
|
||||||
35: #665000,
|
35: #665000,
|
||||||
40: #735b0d,
|
40: #735b0d,
|
||||||
50: #8e7426,
|
50: #8e7426,
|
||||||
60: #aa8e3e,
|
60: #aa8e3e,
|
||||||
70: #c6a855,
|
70: #c6a855,
|
||||||
80: #e3c36d,
|
80: #e3c36d,
|
||||||
90: #ffe08e,
|
90: #ffe08e,
|
||||||
95: #ffefce,
|
95: #ffefce,
|
||||||
98: #fff8f1,
|
98: #fff8f1,
|
||||||
99: #fffbff,
|
99: #fffbff,
|
||||||
100: #ffffff,
|
100: #ffffff,
|
||||||
),
|
),
|
||||||
neutral: (
|
neutral: (
|
||||||
0: #000000,
|
0: #000000,
|
||||||
10: #1a1c1c,
|
10: #1a1c1c,
|
||||||
20: #2f3131,
|
20: #2f3131,
|
||||||
25: #3a3c3c,
|
25: #3a3c3c,
|
||||||
30: #464747,
|
30: #464747,
|
||||||
35: #525253,
|
35: #525253,
|
||||||
40: #5e5e5f,
|
40: #5e5e5f,
|
||||||
50: #767777,
|
50: #767777,
|
||||||
60: #909191,
|
60: #909191,
|
||||||
70: #ababab,
|
70: #ababab,
|
||||||
80: #c7c6c6,
|
80: #c7c6c6,
|
||||||
90: #e3e2e2,
|
90: #e3e2e2,
|
||||||
95: #f1f0f0,
|
95: #f1f0f0,
|
||||||
98: #faf9f9,
|
98: #faf9f9,
|
||||||
99: #fdfcfc,
|
99: #fdfcfc,
|
||||||
100: #ffffff,
|
100: #ffffff,
|
||||||
4: #0d0e0f,
|
4: #0d0e0f,
|
||||||
6: #121414,
|
6: #121414,
|
||||||
12: #1e2020,
|
12: #1e2020,
|
||||||
17: #292a2a,
|
17: #292a2a,
|
||||||
22: #343535,
|
22: #343535,
|
||||||
24: #38393a,
|
24: #38393a,
|
||||||
87: #dadada,
|
87: #dadada,
|
||||||
92: #e9e8e8,
|
92: #e9e8e8,
|
||||||
94: #eeeeed,
|
94: #eeeeed,
|
||||||
96: #f4f3f3,
|
96: #f4f3f3,
|
||||||
),
|
),
|
||||||
neutral-variant: (
|
neutral-variant: (
|
||||||
0: #000000,
|
0: #000000,
|
||||||
10: #1b1c1c,
|
10: #1b1c1c,
|
||||||
20: #303030,
|
20: #303030,
|
||||||
25: #3c3b3b,
|
25: #3c3b3b,
|
||||||
30: #474746,
|
30: #474746,
|
||||||
35: #535252,
|
35: #535252,
|
||||||
40: #5f5e5e,
|
40: #5f5e5e,
|
||||||
50: #787776,
|
50: #787776,
|
||||||
60: #929090,
|
60: #929090,
|
||||||
70: #adabaa,
|
70: #adabaa,
|
||||||
80: #c8c6c5,
|
80: #c8c6c5,
|
||||||
90: #e4e2e1,
|
90: #e4e2e1,
|
||||||
95: #f3f0ef,
|
95: #f3f0ef,
|
||||||
98: #fcf9f8,
|
98: #fcf9f8,
|
||||||
99: #fffbfb,
|
99: #fffbfb,
|
||||||
100: #ffffff,
|
100: #ffffff,
|
||||||
),
|
),
|
||||||
error: (
|
error: (
|
||||||
0: #000000,
|
0: #000000,
|
||||||
10: #410002,
|
10: #410002,
|
||||||
20: #690005,
|
20: #690005,
|
||||||
25: #7e0007,
|
25: #7e0007,
|
||||||
30: #93000a,
|
30: #93000a,
|
||||||
35: #a80710,
|
35: #a80710,
|
||||||
40: #ba1a1a,
|
40: #ba1a1a,
|
||||||
50: #de3730,
|
50: #de3730,
|
||||||
60: #ff5449,
|
60: #ff5449,
|
||||||
70: #ff897d,
|
70: #ff897d,
|
||||||
80: #ffb4ab,
|
80: #ffb4ab,
|
||||||
90: #ffdad6,
|
90: #ffdad6,
|
||||||
95: #ffedea,
|
95: #ffedea,
|
||||||
98: #fff8f7,
|
98: #fff8f7,
|
||||||
99: #fffbff,
|
99: #fffbff,
|
||||||
100: #ffffff,
|
100: #ffffff,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
$_rest: (
|
$_rest: (
|
||||||
secondary: map.get($_palettes, secondary),
|
secondary: map.get($_palettes, secondary),
|
||||||
neutral: map.get($_palettes, neutral),
|
neutral: map.get($_palettes, neutral),
|
||||||
neutral-variant: map.get($_palettes, neutral-variant),
|
neutral-variant: map.get($_palettes, neutral-variant),
|
||||||
error: map.get($_palettes, error),
|
error: map.get($_palettes, error),
|
||||||
);
|
);
|
||||||
|
|
||||||
$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
|
$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user