PREVIEW_TESTING_GUIDE.md

🧪 Complete Preview Testing Guide

Your Preview URL: http://localhost:7860

---

✅ TAB 1: WELCOME TAB

What to Check:

1. Click "🏠 Welcome" tab
2. Look for:
   • Welcome heading displays
   • "5 AI Models Integrated" section
   • List of 7 specialized modes
   • Information about features
   • Text is readable
   • Background watermarks visible (subtle)

Expected Content:

• Welcome message
• Description of 5 AI models (DeepSeek, ERNIE, GDPVAL, Llama, MiniMax)
• List of 7 modes
• Feature highlights

---

✅ TAB 2: AI LEGAL CHATBOT TAB

What to Check:

1. Click "🤖 AI Legal Chatbot" tab
2. Look for:
   • Chat interface loads
   • Mode selector dropdown appears (7 modes)
   • AI Model selector dropdown appears (Llama 3.3 / MiniMax-M2) ⭐
   • Chat input box visible
   • Example questions display
   • Max Tokens slider
   • Temperature slider
   • Top-p slider

Test Interactions:

1. Click Mode Selector Dropdown

   • Should show:
     • navigation
     • general
     • document_validation
     • legal_research
     • etymology
     • case_management
     • regulatory_updates

2. Click AI Model Selector Dropdown ⭐

   • Should show:
     • Meta Llama 3.3
     • MiniMax-M2

3. Try Typing in Chat

   • Type: "Hello"
   • See if input works (response may need HF login)

4. Click Example Questions

   • Should auto-fill the chat

---

✅ TAB 3: FEATURES TAB

What to Check:

1. Click "✨ Features" tab
2. Look for:
   • "Advanced AI Features" heading
   • List of 5 AI models with descriptions
   • DeepSeek-OCR info
   • ERNIE-4.5-VL info
   • OpenAI GDPVAL info
   • Meta Llama 3.3 info
   • MiniMax-M2 info ⭐
   • "What This Means" section
   • Text formatting is correct

Expected Content:

• Detailed explanation of each AI model
• What each model does
• Benefits of multi-AI approach

---

✅ TAB 4: ABOUT TAB

What to Check:

1. Click "ℹ️ About" tab
2. Look for:
   • "About ProVerBs Legal AI" heading
   • Version number (2.1.0)
   • "Complete AI Edition" mentioned
   • List of features (7 modes, 5 models, etc.)
   • Technical Stack section
   • Disclaimer text
   • Footer with version info

Expected Content:

• Version 2.1.0 info
• Complete feature list
• Technical details
• Legal disclaimer

---

🎨 VISUAL CHECKS (All Tabs)

Watermarks (Test on ANY tab):

1. Look in corners and center - Should see 5 subtle logos
2. Start 30-second timer - Watch watermarks fade and change
3. Observe random selection - Each position picks random logo
4. Check opacity - Should be subtle (8%), not distracting

Header Logo:

1. Look at top of page - Circular logo in purple gradient
2. Start 60-second timer - Watch it change (Logo 1 → 2 → 3)
3. Check border and shadow - Should look professional

Overall Design:

• Purple gradient header
• Clean, professional layout
• Text is readable over watermarks
• No layout issues
• Mobile responsive (resize browser)

---

⏱️ TIMING TESTS

30-Second Test (Watermarks):

1. Start timer when page loads
2. At 0:30 - All 5 watermarks should fade and change
3. At 1:00 - Header logo changes
4. At 1:30 - Watermarks change again
5. At 2:00 - Header logo changes again

What Should Happen:

• Watermarks: Change every 30 seconds, random logos
• Header: Changes every 60 seconds, sequential (1→2→3)
• Transitions: Smooth 2-second fade

---

🖱️ INTERACTION TESTS

Navigation:

• Click between all 4 tabs multiple times
• Tabs switch smoothly
• Content updates correctly

Dropdowns:

• Mode selector opens and closes
• AI Model selector opens and closes
• Can select different options

Sliders:

• Max Tokens slider moves
• Temperature slider moves
• Top-p slider moves

Scrolling:

• Page scrolls smoothly
• Watermarks stay fixed (don't scroll with page)
• Header stays at top

---

📱 MOBILE/RESPONSIVE TEST

Resize Browser Window:

1. Make window narrow (mobile size)
2. Check:
   • Layout adjusts
   • Text remains readable
   • Tabs still work
   • Watermarks still visible
   • No horizontal scroll

---

🚨 ISSUE CHECKLIST

If You See Problems:

Watermarks not visible:

• Check corners and center carefully
• They're subtle (8% opacity)
• Try different tabs

Watermarks not changing:

• Wait full 30 seconds
• Check browser console for errors

Header logo not changing:

• Wait full 60 seconds
• Check if images loaded

Tabs not working:

• Try refreshing page
• Check browser console

Dropdowns not appearing:

• Make sure you're on "AI Legal Chatbot" tab
• They only show in that tab

---

✅ FINAL CHECKLIST

Before approving for deployment:

Visual:

• All 4 tabs display correctly
• 5 watermarks visible in background
• Header logo displays and rotates
• Professional appearance
• No visual glitches

Functionality:

• All tabs clickable
• Mode selector works
• AI Model selector works
• Chat input accepts text
• Sliders move

Timing:

• Watched watermarks change at 30 sec
• Watched header logo change at 60 sec
• Smooth transitions

Performance:

• Page loads quickly
• Smooth scrolling
• No lag or freezing

---

📊 TEST RESULTS

Date Tested: _______________

Overall Rating: ⭐⭐⭐⭐⭐

Issues Found:

• None - Ready to deploy! ✅
• Minor issues (list below)
• Major issues (needs fixing)

Notes:

---

---

---

---

🎯 AFTER TESTING

If everything looks good: ✅ Say "Looks great, deploy it!"

If you need adjustments: ⚠️ Describe what needs changing

If you want to test more: 🔄 Keep testing and exploring!

---

Happy Testing! 🧪