feat: refactor frontend and fix LLM extraction

- Fix critical await bug in extract-stream endpoint
- Add comprehensive logging to LLM and parser modules
- Implement fallback to standard completion for incompatible models
- Create enhanced v2.0 prompts with social media handling and few-shot examples
- Add LLM health check endpoint
- Decompose share page into 6 focused Svelte 5 snippets

Resolves LM Studio integration issues and improves code maintainability
This commit is contained in:
Giancarmine Salucci
2025-12-21 03:49:33 +01:00
parent 377bdbf6d7
commit da58263aba
9 changed files with 2104 additions and 56 deletions

View File

@@ -159,9 +159,7 @@
}
</script>
<div class="p-8 max-w-lg mx-auto space-y-4">
<h1 class="text-2xl font-bold">InstaChef PWA</h1>
{#snippet urlInputSection()}
{#if targetUrl}
<div class="bg-gray-100 p-2 rounded break-all text-sm border">{targetUrl}</div>
@@ -174,11 +172,15 @@
<p class="text-gray-500">No URL detected. Open this app via Instagram Share Menu.</p>
<div class="text-xs text-gray-400">Debug: Text={sharedText} URL={sharedUrl}</div>
{/if}
{/snippet}
{#snippet progressIndicator()}
{#if status === 'extracting'}
<div class="animate-pulse text-blue-600">Extracting data...</div>
{/if}
{/snippet}
{#snippet extractedTextViewer()}
{#if bodyText}
<details class="border rounded p-2 bg-white text-sm">
<summary class="cursor-pointer font-semibold">📝 View Extracted Text</summary>
@@ -187,19 +189,22 @@
</div>
</details>
{/if}
{/snippet}
{#snippet recipeCard()}
{#if recipe}
<div class="border rounded p-4 bg-green-50 space-y-2">
<h2 class="font-bold text-xl">{recipe.name}</h2>
<p class="text-sm">{recipe.description}</p>
<p class="text-muted"><strong>Servings:</strong> {recipe.servings}</p>
<h3 class="font-bold mt-2">Ingredients</h3>
<ul class="list-disc pl-5 text-sm">
{#each recipe.ingredients as ing}
<li>{ing.amount} {ing.unit} {ing.item}</li>
{/each}
</ul>
<h3 class="font-bold mt-2">Steps</h3>
<ol class="list-decimal pl-5 text-sm">
{#each recipe.steps as step}
@@ -233,7 +238,9 @@
</button>
</div>
{/if}
{/snippet}
{#snippet errorState()}
{#if status === 'error' && bodyText}
<div class="border rounded p-4 bg-yellow-50 space-y-2">
<h3 class="font-bold text-lg">Extraction Error - Raw Text Available</h3>
@@ -251,7 +258,9 @@
</button>
</div>
{/if}
{/snippet}
{#snippet logViewer()}
<div class="bg-slate-900 text-slate-100 p-4 rounded-lg shadow-lg min-h-[120px] max-h-[400px] overflow-y-auto">
<div class="flex items-center justify-between mb-3 pb-2 border-b border-slate-700">
<div class="text-sm font-semibold opacity-70">System Logs</div>
@@ -283,4 +292,15 @@
{/if}
</div>
</div>
{/snippet}
<div class="p-8 max-w-lg mx-auto space-y-4">
<h1 class="text-2xl font-bold">InstaChef PWA</h1>
{@render urlInputSection()}
{@render progressIndicator()}
{@render extractedTextViewer()}
{@render recipeCard()}
{@render errorState()}
{@render logViewer()}
</div>