bibdle/src/routes/similarity/+page.svelte

<script lang="ts">
  let sentence = $state("");
  let results = $state<
    Array<{
      book: string;
      chapter: number;
      verse: number;
      text: string;
      score: number;
    }>
  >([]);
  let loading = $state(false);

  async function searchVerses() {
    loading = true;
    try {
      const response = await fetch("/api/similar-verses", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ sentence, topK: 10 }),
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${await response.text()}`);
      }

      const data = await response.json();
      if (data.error) {
        throw new Error(data.error);
      }
      results = data.results || [];
    } catch (error) {
      console.error("Search error:", error);
      results = [];
    } finally {
      loading = false;
    }
  }
</script>

<div class="page">
  <h1 class="title">Similar Verse Finder</h1>

  <div class="search-section">
    <input
      bind:value={sentence}
      placeholder="Enter a sentence to find similar Bible verses..."
      class="input"
    />
    <button onclick={searchVerses} disabled={loading} class="button">
      {loading ? "Searching..." : "Find Similar Verses"}
    </button>
  </div>

  {#if results.length > 0}
    <div class="results">
      {#each results as result, i (i)}
        <article class="result">
          <header>
            <strong>{result.book} {result.chapter}:{result.verse}</strong>
            <span class="score">Score: {result.score.toFixed(3)}</span>
          </header>
          <p>{result.text}</p>
        </article>
      {/each}
    </div>
  {:else if sentence.trim() && !loading}
    <p class="no-results">No similar verses found. Try another sentence!</p>
  {/if}
</div>

<style>
  .page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 0.75rem;
    font-family:
      system-ui,
      -apple-system,
      sans-serif;
  }

  .title {
    text-align: center;
    margin-bottom: 1.75rem;
    font-size: clamp(2rem, 5vw, 3rem);
    color: #2c3e50;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .search-section {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }

  .input {
    flex: 1;
    min-width: 300px;
    padding: 0.75rem 1rem;
    border: 2px solid #e1e5e9;
    border-radius: 12px;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    background: #fafbfc;
  }

  .input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    background: white;
  }

  .button {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
  }

  .button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  }

  .button:disabled {
    background: #a0aec0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .result {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
  }

  .result:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }

  .result header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    gap: 0.75rem;
  }

  .result strong {
    font-size: 1.3rem;
    color: #1a202c;
  }

  .score {
    font-size: 1rem;
    color: #718096;
    font-weight: 500;
    white-space: nowrap;
  }

  .result p {
    margin: 0;
    line-height: 1.7;
    color: #4a5568;
    font-size: 1.1rem;
  }

  .no-results {
    text-align: center;
    padding: 1.75rem 0.75rem;
    color: #a0aec0;
    font-size: 1.2rem;
    font-style: italic;
  }

  @media (max-width: 768px) {
    .search-section {
      flex-direction: column;
    }

    .input {
      min-width: unset;
    }

    .result header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
  }
</style>