solutions.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ML-Scope Solutions</title>
    <link rel="icon" type="image/x-icon" href="aida-logo.jpeg" />
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav>
      <div class="container">
        <a href="index.html">
          <img src="aida-logo.jpeg" alt="Logo" class="logo" />
        </a>
        <div class="nav-links">
          <a href="index.html">Problems</a>
          <a href="solutions.html">Solutions</a>
          <a href="leaderboard.html">Leaderboard</a>
          <a href="resources.html">Resources</a>
        </div>
      </div>
    </nav>

    <div class="container">
      <h1>Solutions</h1>
      <div id="content"></div>
    </div>

    <script>
      const solutionsData = [
        {
          project: 1,
          title: "Multi-City Housing Market Analysis & Prediction",
          content: `
            <h1>Project 1 Solution</h1>

            <h2>Summary</h2>
            <h4>Baseline Models:</h4>
            <ul>
              <li>Linear Regression yielded an R² score of 0.63, which provided a reasonable starting point but showed limited capacity for capturing complex housing market relationships.</li>
              <li>Decision Tree Regressor performed better with a score of 0.79, indicating improved ability to capture non-linear patterns in housing data.</li>
              <li>Random Forest Regressor achieved a significantly better score of 0.85, making it the best among the baseline models.</li>
            </ul>

            <h4>Highest-Performing Solutions:</h4>
            <ul>
              <li>Gradient Boosting Regressor after hyperparameter tuning scored 0.92, demonstrating that ensemble methods with boosting can yield excellent results for this problem.</li>
              <li>Random Forest with feature engineering (including distance to amenities and price-to-rent ratio) scored 0.89, highlighting the importance of thoughtful feature creation.</li>
              <li>Neural Network implementation achieved comparable performance (0.90) but required significantly more computational resources.</li>
            </ul>

            <h4>Key Insights:</h4>
            <ul>
              <li>Location-based features showed the highest importance across all models, with proximity to employment centers being particularly significant.</li>
              <li>Market segmentation revealed distinct price drivers in coastal vs. inland areas.</li>
            </ul>

            <h4>Improvement Feedback:</h4>
            <ol>
              <li><strong>Improve Feature Engineering</strong>: Create meaningful features to enhance model performance.</li>
              <li><strong>Use Advanced Models</strong>: Experiment with Random Forest, Gradient Boosting, and Neural Networks.</li>
              <li><strong>Perform Hyperparameter Tuning</strong>: Optimize model performance using GridSearchCV or RandomizedSearchCV.</li>
              <li><strong>Leverage Cross-Validation</strong>: Ensure the model generalizes well to unseen data.</li>
              <li><strong>Enhance Visualizations</strong>: Use interactive tools like Plotly and Folium for better data communication.</li>
              <li><strong>Incorporate Supplementary Data</strong>: Enrich the dataset with external sources like Zillow or Census data.</li>
              <li><strong>Provide Deeper Insights</strong>: Analyze price trends, segment markets, and identify key value drivers.</li>
              <li><strong>Evaluate Models Thoroughly</strong>: Use multiple metrics and compare results to benchmarks.</li>
              <li><strong>Focus on Code Quality</strong>: Write clean, modular, and well-documented code.</li>
            </ol>

            <h4>Resources:</h4>
            <a target="_blank" href="https://colab.research.google.com/drive/1FQ5uF8s0F_QIUrfVN2zPZAMZNOHKrtn2?usp=sharing">Link to Notebook</a>
          `,
        },
      ];

      function createProjectElement(projectData) {
        const projectElement = document.createElement("div");
        projectElement.className = "project-container";
        projectElement.innerHTML = `
                <div class="project-header">
                    <h2>MLScope ${projectData.project}: ${projectData.title}</h2>
                    <span class="toggle-icon"></span>
                </div>
                <div class="project-content">
                    ${projectData.content}
                </div>
            `;
        return projectElement;
      }

      function toggleProject(projectHeader) {
        projectHeader.classList.toggle("active");
        const content = projectHeader.nextElementSibling;
        content.classList.toggle("active");
      }

      function loadContent(data) {
        const contentDiv = document.getElementById("content");
        contentDiv.innerHTML = "";
        data.forEach((project, index) => {
          const projectElement = createProjectElement(project);
          contentDiv.appendChild(projectElement);

          const projectHeader = projectElement.querySelector(".project-header");
          projectHeader.addEventListener("click", () =>
            toggleProject(projectHeader)
          );

          // Open the last project by default
          if (index === data.length - 1) {
            toggleProject(projectHeader);
          }
        });
      }

      // Determine which page to load based on the current URL
      const currentPage = window.location.pathname.includes("solutions.html")
        ? "solutions"
        : "problems";
      loadContent(currentPage === "solutions" ? solutionsData : problemsData);
    </script>
  </body>
</html>