Spaces:

mutoy
/

Broadcast_paper

Sleeping

File size: 19,842 Bytes

d4a3b8b

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>기사 성과 예측</title>
    <style>
    *, *::before, *::after {box-sizing: border-box;}
      :root {
        /* Color Palette */
        --font-sans: "Pretendard", "Segoe UI", system-ui, -apple-system, sans-serif;
        
        /* Light Mode */
        --bg-light: #f4f6f8; /* 약간 더 부드러운 회색 배경 */
        --card-light: #ffffff;
        --text-primary-light: #111827; /* 진한 차콜 */
        --text-secondary-light: #6b7280; /* 중간 회색 */
        --border-light: #e5e7eb; /* 옅은 회색 테두리 */
        --accent-primary: #3b82f6; /* 차분한 블루 */
        --accent-secondary: #1d4ed8;
        --accent-glow: rgba(59, 130, 246, 0.2);

        /* Dark Mode */
        --bg-dark: #111827; /* 딥 네이비/차콜 */
        --card-dark: #1f2937; /* 약간 밝은 네이비/차콜 */
        --text-primary-dark: #f9fafb; /* 거의 흰색 */
        --text-secondary-dark: #9ca3af; /* 밝은 회색 */
        --border-dark: #374151;
      }

      /* Basic Setup */
      body {
        font-family: var(--font-sans);
        margin: 0;
        padding: 0;
        background-color: var(--bg-light);
        color: var(--text-primary-light);
        display: flex;
        justify-content: center;
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transition: background-color 0.3s ease, color 0.3s ease;
      }
      
      @media (prefers-color-scheme: dark) {
        body {
          background-color: var(--bg-dark);
          color: var(--text-primary-dark);
        }
      }

      .container {
        width: min(960px, 100% - 40px);
        padding: 48px 20px 64px;
      }

      /* Typography */
      h1 {
        font-size: 2.25rem;
        font-weight: 800;
        letter-spacing: -0.04em;
        color: var(--text-primary-light);
      }

      p.subtitle {
        font-size: 1.125rem;
        margin: 8px 0 40px;
        color: var(--text-secondary-light);
      }

      h2 {
        font-size: 1.5rem;
        font-weight: 700;
        border-bottom: 1px solid var(--border-light);
        padding-bottom: 12px;
        margin-bottom: 24px;
      }
      
      h3 {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary-light);
      }

      @media (prefers-color-scheme: dark) {
        h1, h3 { color: var(--text-primary-dark); }
        p.subtitle { color: var(--text-secondary-dark); }
        h2 { border-color: var(--border-dark); }
      }

      /* Main Card */
      .card {
        background-color: var(--card-light);
        border-radius: 24px;
        padding: 40px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.02), 0 20px 40px rgba(23, 33, 73, 0.08);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
      }

      @media (prefers-color-scheme: dark) {
        .card {
          background-color: var(--card-dark);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
        }
      }

      /* Form Elements */
      form {
        display: grid;
        gap: 24px;
      }

      label {
        display: block;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 8px;
        color: var(--text-primary-light);
      }
      
      @media (prefers-color-scheme: dark) {
        label { color: var(--text-primary-dark); }
      }

      input[type="text"],
      select,
      textarea {
        width: 100%;
        padding: 12px 16px;
        border-radius: 10px;
        border: 1px solid var(--border-light);
        font-size: 1rem;
        background-color: var(--bg-light);
        color: var(--text-primary-light);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        resize: vertical;
      }

      textarea { min-height: 180px; }

      input:focus,
      textarea:focus,
      select:focus {
        outline: none;
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 3px var(--accent-glow);
      }
      
      @media (prefers-color-scheme: dark) {
        input[type="text"], select, textarea {
          background-color: #2a3647;
          border-color: var(--border-dark);
          color: var(--text-primary-dark);
        }
      }

      button {
        background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
        color: #fff;
        border: none;
        padding: 14px 24px;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
      }

      button:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
      }

      button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      #summarize-btn {
        margin-top: 8px;
        width: 100%;
        background: transparent;
        color: var(--accent-secondary);
        border: 1px solid var(--accent-secondary);
        box-shadow: none;
      }

      #summarize-btn:hover {
        background: rgba(59, 130, 246, 0.1);
      }

      #summarize-btn:disabled {
        opacity: 0.6;
        background: rgba(59, 130, 246, 0.05);
      }

      /* Results Section */
      #results-container {
        margin-top: 40px;
        padding-top: 40px;
        border-top: 1px solid var(--border-light);
        line-height: 1.65;
      }
      @media (prefers-color-scheme: dark) {
        #results-container { border-color: var(--border-dark); }
      }
      #results-container.hidden { display: none; }
      
      .spinner {
        width: 36px;
        height: 36px;
        border: 4px solid var(--accent-glow);
        border-top-color: var(--accent-primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 32px auto;
      }

      @keyframes spin { to { transform: rotate(360deg); } }

      .error-message { color: #f43f5e; font-weight: 600; }
      .results-section { margin-bottom: 40px; }

      .ai-card {
        background-color: #eff6ff;
        border-radius: 16px;
        padding: 24px;
        border: 1px solid #dbeafe;
      }
      .ai-card ul { padding-left: 20px; color: var(--text-secondary-light); }
      .ai-card li strong { color: var(--text-primary-light); }
      .ai-card li .summary {
        font-size: 0.9rem;
        color: var(--text-secondary-light);
        margin: 6px 0 0;
      }
      
      @media (prefers-color-scheme: dark) {
        .ai-card {
          background-color: #1e293b;
          border-color: #334155;
        }
        .ai-card ul { color: var(--text-secondary-dark); }
        .ai-card li strong { color: var(--text-primary-dark); }
        .ai-card li .summary { color: var(--text-secondary-dark); }
      }

      /* SEO Simulation */
      .seo-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }
      @media (max-width: 768px) {
        .seo-grid { grid-template-columns: 1fr; }
      }

      .seo-column {
        border: 1px solid var(--border-light);
        border-radius: 16px;
        padding: 24px;
      }
      @media (prefers-color-scheme: dark) {
        .seo-column { border-color: var(--border-dark); }
      }
      .seo-column h3 { margin-top: 0; }

      /* SERP Preview */
      .serp-preview {
        background-color: var(--card-light);
        border-radius: 8px;
        padding: 16px;
        border: 1px solid var(--border-light);
        margin-bottom: 24px;
        font-family: Arial, sans-serif;
      }
      .serp-preview .serp-url { color: #1e8e3e; font-size: 0.875rem; }
      .serp-preview .serp-title { color: #1a0dab; font-size: 1.25rem; font-weight: 400; margin: 4px 0; }
      .serp-preview .serp-description { color: #4d5156; font-size: 0.875rem; line-height: 1.5; }

      @media (prefers-color-scheme: dark) {
        .serp-preview {
          background-color: #2d3748;
          border-color: var(--border-dark);
        }
        .serp-preview .serp-url { color: #98c379; }
        .serp-preview .serp-title { color: #8ab4f8; }
        .serp-preview .serp-description { color: #bdc1c6; }
      }
      
      .seo-input-group { margin-top: 16px; }

      .counter {
        font-size: 0.8rem;
        color: var(--text-secondary-light);
        text-align: right;
        margin-top: 4px;
      }
      
      @media (prefers-color-scheme: dark) {
        .counter { color: var(--text-secondary-dark); }
      }
    </style>
  </head>
  <body>
    <main class="container">
      <section class="card">
        <h1>기사 성과 예측</h1>
        <p class="subtitle">기사 내용을 입력하면 예상 조회수, 핵심 독자층, 유사 기사를 추천해 드립니다.</p>

        <form id="prediction-form" autocomplete="off">
          <div>
            <label for="title">기사 제목</label>
            <input type="text" id="title" name="title" placeholder="예: AI 기술, 언론 제작 방식 대전환" required />
          </div>

          <div>
            <label for="category">카테고리</label>
            <select id="category" name="category" required>
              <option value="" disabled selected>카테고리를 선택하세요</option>
            </select>
          </div>

          <div>
            <label for="content">기사 본문</label>
            <textarea id="content" name="content" placeholder="핵심 내용과 주요 포인트를 입력하세요." required></textarea>
          </div>

          <button type="submit">분석하기</button>
        </form>

        <div id="results-container" class="hidden"></div>
      </section>
    </main>

    <script>
    const form = document.getElementById("prediction-form");
    const resultsContainer = document.getElementById("results-container");
    const categorySelect = document.getElementById("category");
    const articleContentInput = document.getElementById("content");

      const MAX_TITLE_LENGTH = 60;
      const MAX_DESCRIPTION_LENGTH = 150;

      const renderLoading = () => {
        resultsContainer.classList.remove("hidden");
        resultsContainer.innerHTML = `
          <div class="spinner"></div>
          <p style="text-align:center;">AI가 분석 중입니다...</p>
        `;
      };

      const renderError = (message) => {
        resultsContainer.classList.remove("hidden");
        resultsContainer.innerHTML = `<p class="error-message">⚠️ ${message}</p>`;
      };

      const createSimilarArticlesList = (similarArticles = []) => {
        if (!similarArticles.length) {
          return "<li>유사 기사를 찾지 못했습니다.</li>";
        }
        return similarArticles
          .map((article) => {
            const title = article.title ?? "제목 미상";
            const summary = article.summary ? `${article.summary}...` : "요약을 제공할 수 없습니다.";
            return `
              <li>
                <strong>${title}</strong>
                <p class="summary">${summary}</p>
              </li>
            `;
          })
          .join("");
      };

      const renderResults = (data) => {
        const { ai_prediction, seo_simulation } = data;
        const { predicted_views, predicted_age_group, similar_articles } = ai_prediction || {};
        const { current_state, recommended_state } = seo_simulation || {};

        resultsContainer.classList.remove("hidden");
        resultsContainer.innerHTML = `
          <section class="results-section ai-card">
            <h2>AI 예측 결과</h2>
            <h3>예상 조회수: <strong>${(predicted_views ?? 0).toLocaleString()}회</strong></h3>
            <h3>핵심 독자층: <strong>${predicted_age_group ?? "N/A"}</strong></h3>
            <h3>유사 기사 추천</h3>
            <ul>
              ${createSimilarArticlesList(similar_articles)}
            </ul>
          </section>

          <section class="results-section">
            <h2>SEO 시뮬레이션</h2>
            <div class="seo-grid">
              <div class="seo-column">
                <h3>현재 노출 상태 (Before)</h3>
                <div class="serp-preview">
                  <p class="serp-url">press.example.com/article</p>
                  <p class="serp-title">${"한국언론진흥재단 전체기사"}</p>
                  <p class="serp-description">${"설명이 제공되지 않았습니다."}</p>
                </div>
                <p>${current_state?.issue ?? "현재 문제를 파악하지 못했습니다."}</p>
              </div>

              <div class="seo-column">
                <h3>추천 개선안 (After)</h3>
                <div class="serp-preview" id="after-preview">
                  <p class="serp-url">press.example.com/article</p>
                  <p class="serp-title" id="after-title-preview"></p>
                  <p class="serp-description" id="after-description-preview"></p>
                </div>

                <div class="seo-input-group">
                  <div>
                    <label for="seo-title-input">추천 제목</label>
                    <input type="text" id="seo-title-input" maxlength="80" />
                    <div class="counter" id="title-counter"></div>
                  </div>

                  <div>
                    <label for="seo-description-input">추천 설명</label>
                    <textarea id="seo-description-input" rows="4" maxlength="200"></textarea>
                    <div class="counter" id="description-counter"></div>
                    <button type="button" id="summarize-btn">본문 내용으로 설명 다시 생성하기 ↺</button>
                  </div>
                </div>

                <p>추천 제목과 설명을 조정하여 SERP에서의 가독성과 클릭 유도 문구를 최적화할 수 있습니다.</p>
              </div>
            </div>
          </section>
        `;

        const seoTitleInput = document.getElementById("seo-title-input");
        const seoDescriptionInput = document.getElementById("seo-description-input");
        const afterTitlePreview = document.getElementById("after-title-preview");
        const afterDescriptionPreview = document.getElementById("after-description-preview");
        const titleCounter = document.getElementById("title-counter");
        const descriptionCounter = document.getElementById("description-counter");
        const summarizeBtn = document.getElementById("summarize-btn");

        const initialTitle = recommended_state?.title ?? "검색 엔진 친화적인 기사 제목";
        const initialDescription = recommended_state?.description ?? "핵심 키워드와 요약 내용을 포함하는 설명을 작성해 보세요.";

        seoTitleInput.maxLength = MAX_TITLE_LENGTH;
        seoDescriptionInput.maxLength = MAX_DESCRIPTION_LENGTH;
        seoTitleInput.value = initialTitle;
        seoDescriptionInput.value = initialDescription;

        const updateTitlePreview = () => {
          const value = seoTitleInput.value;
          afterTitlePreview.textContent = value;
          titleCounter.textContent = `${value.length} / ${MAX_TITLE_LENGTH}`;
        };

        const updateDescriptionPreview = () => {
          const value = seoDescriptionInput.value;
          afterDescriptionPreview.textContent = value;
          descriptionCounter.textContent = `${value.length} / ${MAX_DESCRIPTION_LENGTH}`;
        };

        seoTitleInput.addEventListener("input", updateTitlePreview);
        seoDescriptionInput.addEventListener("input", updateDescriptionPreview);

        if (summarizeBtn) {
          summarizeBtn.addEventListener("click", async () => {
            const contentValue = articleContentInput.value.trim();
            if (!contentValue) {
              alert("본문 내용을 입력한 뒤 다시 시도해주세요.");
              return;
            }

            const originalText = summarizeBtn.textContent;
            summarizeBtn.disabled = true;
            summarizeBtn.textContent = "생성 중...";

            try {
              const response = await fetch("/generate-description", {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify({ content: contentValue }),
              });

              if (!response.ok) {
                const { error } = await response.json();
                throw new Error(error || "설명을 생성하지 못했습니다.");
              }

              const seoData = await response.json();
              seoTitleInput.value = seoData.title ?? "";
              seoDescriptionInput.value = seoData.description ?? "";
              seoTitleInput.dispatchEvent(new Event("input"));
              seoDescriptionInput.dispatchEvent(new Event("input"));
            } catch (error) {
              console.error(error);
              alert("AI 설명 생성 중 문제가 발생했습니다. 잠시 후 다시 시도해주세요.");
            } finally {
              summarizeBtn.disabled = false;
              summarizeBtn.textContent = originalText;
            }
          });
        }

        updateTitlePreview();
        updateDescriptionPreview();
      };

      const fetchCategories = async () => {
        try {
          const response = await fetch("/categories");
          if (!response.ok) throw new Error("카테고리 정보를 불러오지 못했습니다.");
          const { categories } = await response.json();

          if (Array.isArray(categories)) {
            categories.forEach((category) => {
              const option = document.createElement("option");
              option.value = category;
              option.textContent = category;
              categorySelect.appendChild(option);
            });
          }
        } catch (error) {
          console.error(error);
          renderError("카테고리 로딩 중 문제가 발생했습니다. 새로고침 후 다시 시도해주세요.");
        }
      };

      form.addEventListener("submit", async (event) => {
        event.preventDefault();

        const title = form.title.value.trim();
        const content = form.content.value.trim();
        const category = form.category.value;

        if (!title || !content || !category) {
          renderError("제목, 카테고리, 본문을 모두 입력해주세요.");
          return;
        }

        renderLoading();
        const submitButton = form.querySelector("button[type='submit']");
        submitButton.disabled = true;
        const originalButtonText = submitButton.textContent;
        submitButton.textContent = "AI로 분석 중...";

        try {
          const response = await fetch("/predict", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ title, content, category }),
          });

          if (!response.ok) {
            const { error } = await response.json();
            throw new Error(error || "예측 요청에 실패했습니다.");
          }

          const payload = await response.json();
          renderResults(payload);
        } catch (error) {
          console.error(error);
          renderError(error.message || "서버 요청 중 오류가 발생했습니다.");
        } finally {
          submitButton.disabled = false;
          submitButton.textContent = originalButtonText;
        }
      });

      fetchCategories();
    </script>
  </body>
</html>