[Feature] Add Interactive Onboarding Tour for First-Time Users

[Pcmhacker-piro]

Description

When a new farmer or researcher visits Agri-Vision for the first time, there is no guided onboarding experience to help them understand the platform. The landing page shows features but doesn't walk users through the core workflow: uploading an image, viewing analysis results, interpreting disease predictions, and accessing recommendations.

A first-time user may feel overwhelmed by the number of features and navigation options without a clear starting point.

Steps to Reproduce

1. Visit the Agri-Vision web app as a new (unregistered) user
2. Landing page shows the hero section, features cards, and navbar
3. There is no welcome modal, tooltip tour, or guided walkthrough
4. Users must explore the platform on their own with zero guidance

Expected Behavior

• Onboarding Modal: Show a welcome modal on first visit with a "Start Tour" button and a "Skip" option
• Step-by-Step Tour: A 4–5 step highlighted tour that walks through:
  1. Upload page — how to upload a crop image
  2. Analysis results — how to read disease/health scores
  3. Grad-CAM heatmap — how to interpret model focus areas
  4. Recommendations — how to view treatment suggestions
  5. History & reports — how to track past analyses
• Persistence: Use localStorage to remember that the tour has been completed, so it doesn't show again
• Replay Option: Add a "Help / Take Tour" link in the navbar footer or user menu

Implementation Hints

Frontend — Use a lightweight tour library or plain JS/CSS:

<!-- Add to base.html or index.html -->
<div id="onboarding-overlay" class="hidden fixed inset-0 bg-black/50 z-50">
  <div id="tour-step" class="absolute bg-white rounded-xl shadow-2xl p-6 max-w-sm">
    <h3 class="text-lg font-bold mb-2" id="tour-title">Welcome to Agri-Vision!</h3>
    <p class="text-sm text-gray-600 mb-4" id="tour-description">Let us show you around.</p>
    <div class="flex justify-between">
      <button onclick="skipTour()" class="text-sm text-gray-500">Skip</button>
      <button onclick="nextStep()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm">Next</button>
    </div>
  </div>
</div>

JavaScript (static/js/onboarding.js):

const STORAGE_KEY = "agrivision_tour_completed";

const tourSteps = [
  { title: "Upload Image", desc: "Click 'Upload' to analyze your crop photo.", target: "#upload-link" },
  { title: "View Results", desc: "See disease detection, growth stage, and health scores.", target: "#results-section" },
  { title: "Recommendations", desc: "Get AI-powered treatment suggestions.", target: "#recommendations" },
  { title: "Track History", desc: "Access your past analyses from the Dashboard.", target: "#dashboard-link" }
];

function startTour() {
  if (localStorage.getItem(STORAGE_KEY)) return;
  showStep(0);
}

function showStep(index) { /* highlight target, position tooltip */ }
function completeTour() { localStorage.setItem(STORAGE_KEY, "true"); hideOverlay(); }

Affected Files

• templates/base.html (add onboarding overlay)
• static/js/onboarding.js (new)
• static/css/style.css (add tour styling)

Labels

type:feature, level:intermediate, type:design

[Pcmhacker-piro]

Hi @neeru24,

I'd like to contribute to this project by working on this issue. I have experience contributing to open-source projects and would be glad to take ownership of the required implementation.

Kindly assign this issue to me if it's available. Thank you!

[itsmitalijadhav06-beep]

Hi @neeru24, I would like to work on this feature. I have reviewed the issue and understand the requirement of implementing an interactive onboarding tour for first-time users, including guided walkthroughs, tooltips, and a mechanism to prevent the tour from showing repeatedly. Could you please assign this issue to me under GSSoC'26? Thank you.