index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Anime Recommendation</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
      body {
        font-family: "Inter", sans-serif;
        transition: background-color 0.3s ease, color 0.3s ease;
      }

      .card {
        background-color: var(--card-bg);
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
        border-radius: 10px;
        padding: 24px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
      }

      .input-field,
      .select-field,
      .textarea-field {
        background-color: var(--input-bg);
        border: 1px solid var(--border-color);
        color: var(--text-color);
        transition: background-color 0.2s ease, border-color 0.2s ease;
      }

      .input-field:focus,
      .select-field:focus,
      .textarea-field:focus {
        background-color: var(--input-focus-bg);
        border-color: #6366f1;
        outline: none;
      }

      .button {
        background-color: #6366f1;
        color: #fff;
        transition: background-color 0.2s ease;
      }

      .button:hover {
        background-color: #4f46e5;
      }

      .recommendation-card {
        background-color: var(--card-bg-alt);
        border-radius: 8px;
        padding: 14px;
        margin-top: 12px;
      }

      :root {
        --background-color: #fdfdfd;
        --text-color: #2d2d2d;
        --card-bg: #ffffff;
        --input-bg: #f0f0f0;
        --input-focus-bg: #ffffff;
        --border-color: #ddd;
        --card-bg-alt: #fafafa;
      }

      [data-theme="dark"] {
        --background-color: #181818;
        --text-color: #e4e4e4;
        --card-bg: #242424;
        --input-bg: #333333;
        --input-focus-bg: #3a3a3a;
        --border-color: #555;
        --card-bg-alt: #2f2f2f;
      }
    </style>
  </head>

  <body class="bg-gray-100 text-gray-800" data-theme="light">
    <div class="py-8">
      <h1 class="text-4xl font-bold text-center mb-4">
        Anime Recommendation System
      </h1>
      <p class="text-center max-w-2xl mx-auto text-gray-500">
        This project is an Anime Recommendation System that uses a combination
        of content-based filtering and collaborative filtering to suggest anime
        based on user preferences.
      </p>
    </div>

    <div class="min-h-screen flex flex-col items-center justify-center px-4">
      <div class="w-full max-w-md mb-8">
        <div class="card space-y-6">
          <h2 class="text-2xl font-semibold text-center">
            Get Your Anime Recommendations
          </h2>
          <div class="space-y-4">
            <label for="userType" class="block text-sm font-medium"
              >User Type</label
            >
            <select
              id="userType"
              class="select-field mt-1 block w-full rounded-md p-2 focus:ring focus:ring-indigo-500"
            >
              <option value="existing">Existing User</option>
              <option value="new">New User</option>
            </select>
          </div>
          <div id="existingUserForm" class="space-y-4">
            <label for="watchHistory" class="block text-sm font-medium"
              >Watch History (Anime:Rating)</label
            >
            <textarea
              id="watchHistory"
              rows="4"
              class="textarea-field mt-1 block w-full rounded-md p-2 focus:ring focus:ring-indigo-500"
              placeholder="e.g., Naruto:5,Attack on Titan:4"
            ></textarea>
          </div>
          <div id="newUserForm" class="space-y-4 hidden">
            <label for="preferredGenres" class="block text-sm font-medium"
              >Preferred Genres</label
            >
            <input
              id="preferredGenres"
              type="text"
              class="input-field mt-1 block w-full rounded-md p-2 focus:ring focus:ring-indigo-500"
              placeholder="e.g., Action, Adventure"
            />
            <label for="likedAnimeTitles" class="block text-sm font-medium"
              >Liked Anime Titles</label
            >
            <input
              id="likedAnimeTitles"
              type="text"
              class="input-field mt-1 block w-full rounded-md p-2 focus:ring focus:ring-indigo-500"
              placeholder="e.g., Naruto, One Piece"
            />
          </div>
          <button
            id="submitBtn"
            class="button w-full rounded-md py-2 mt-4 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
          >
            Get Recommendations
          </button>
          <div id="recommendations" class="mt-6 text-center"></div>
        </div>
      </div>
      <div class="w-full max-w-2xl text-center mb-12">
        <h2 class="text-2xl font-semibold">How It Works</h2>
        <p class="text-gray-500 mt-4">
          The system uses a combination of content-based filtering and
          collaborative filtering methods to provide anime suggestions based on
          user input. Simply provide your preferred genres or liked anime
          titles, and get personalized recommendations!
        </p>
      </div>
    </div>

    <footer class="w-full bg-gray-900 text-white py-4">
      <div class="max-w-4xl mx-auto flex justify-between items-center px-4">
        <p>
          &copy; 2024 Harshit
          <span class="text-italic text-xs">(https://leoncyriac.me)</span>
        </p>
        <button id="toggleTheme" class="px-4 py-2 bg-gray-700 rounded">
          Toggle Theme
        </button>
      </div>
    </footer>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const savedTheme = localStorage.getItem("theme") || getCookie("theme");
        if (savedTheme) {
          document.body.setAttribute("data-theme", savedTheme);
          document.body.style.backgroundColor = `var(--background-color)`;
          document.body.style.color = `var(--text-color)`;
        }
      });

      document
        .getElementById("userType")
        .addEventListener("change", function () {
          const userType = this.value;
          document
            .getElementById("existingUserForm")
            .classList.toggle("hidden", userType !== "existing");
          document
            .getElementById("newUserForm")
            .classList.toggle("hidden", userType !== "new");
        });

      document
        .getElementById("submitBtn")
        .addEventListener("click", function () {
          const userType = document.getElementById("userType").value;
          const recommendationsDiv = document.getElementById("recommendations");
          recommendationsDiv.innerHTML = "";

          if (userType === "existing") {
            const watchHistory = document
              .getElementById("watchHistory")
              .value.split(",")
              .reduce((acc, curr) => {
                const [anime, rating] = curr.split(":");
                if (anime && rating)
                  acc[anime.trim()] = parseInt(rating.trim());
                return acc;
              }, {});

            axios
              .post("http://127.0.0.1:5000/recommend/existing", {
                watch_history: watchHistory,
              })
              .then((response) => {
                displayRecommendations(response.data.recommendations);
              })
              .catch((error) => {
                recommendationsDiv.innerHTML = `<p class="text-red-500">Error: ${error.response.data.error}</p>`;
              });
          } else {
            const preferredGenres = document
              .getElementById("preferredGenres")
              .value.split(",")
              .map((g) => g.trim());
            const likedAnimeTitles = document
              .getElementById("likedAnimeTitles")
              .value.split(",")
              .map((a) => a.trim());

            axios
              .post("http://127.0.0.1:5000/recommend/new", {
                preferred_genres: preferredGenres,
                liked_anime_titles: likedAnimeTitles,
              })
              .then((response) => {
                displayRecommendations(response.data.recommendations);
              })
              .catch((error) => {
                recommendationsDiv.innerHTML = `<p class="text-red-500">Error: ${error.response.data.error}</p>`;
              });
          }
        });

      function displayRecommendations(recommendations) {
        const recommendationsDiv = document.getElementById("recommendations");
        recommendationsDiv.innerHTML = `<h2 class="text-lg font-semibold text-gray-800">Recommendations:</h2>`;
        recommendations.forEach((anime) => {
          const animeCard = document.createElement("div");
          animeCard.classList.add("recommendation-card");
          animeCard.innerHTML = `<p class="text-md font-medium">${anime}</p>`;
          recommendationsDiv.appendChild(animeCard);
        });
      }

      document
        .getElementById("toggleTheme")
        .addEventListener("click", function () {
          const currentTheme = document.body.getAttribute("data-theme");
          const newTheme = currentTheme === "light" ? "dark" : "light";
          document.body.setAttribute("data-theme", newTheme);
          document.body.style.backgroundColor = `var(--background-color)`;
          document.body.style.color = `var(--text-color)`;
          localStorage.setItem("theme", newTheme);
          setCookie("theme", newTheme, 365);
        });

      function setCookie(name, value, days) {
        const date = new Date();
        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
        const expires = "expires=" + date.toUTCString();
        document.cookie = name + "=" + value + ";" + expires + ";path=/";
      }

      function getCookie(name) {
        const cname = name + "=";
        const decodedCookie = decodeURIComponent(document.cookie);
        const cookieArr = decodedCookie.split(";");
        for (let i = 0; i < cookieArr.length; i++) {
          let c = cookieArr[i].trim();
          if (c.indexOf(cname) == 0) return c.substring(cname.length, c.length);
        }
        return "";
      }
    </script>
  </body>
</html>