Hugging Face's logo

Spaces:
nabilyasini
/
StereoAwareGNN1
Sleeping

App Files Community
StereoAwareGNN1 / INTERFACE_GUIDE.md
nabilyasini's picture
nabilyasini
Upload folder using huggingface_hub
84766d8 verified
preview code
|
raw
history blame contribute delete
12.7 kB

🌐 BBB Web Interface - Visual Guide

🚀 How to Launch

Method 1: Double-Click (Easiest!) 

📁 C:\Users\nakhi\BBB_System\
   📄 START_HERE.bat  ← DOUBLE-CLICK THIS FILE!

Method 2: Command Line 

cd C:\Users\nakhi\BBB_System
streamlit run app.py

The interface will automatically open at: http://localhost:8501

🎨 What You'll See

HEADER (Top of Page) 

╔═══════════════════════════════════════════════════════════════╗
║                                                                 ║
║            🧬 BBB Permeability Predictor                       ║
║                                                                 ║
║     Graph Neural Network powered Blood-Brain Barrier           ║
║              prediction                                         ║
║                                                                 ║
╚═══════════════════════════════════════════════════════════════╝

(Beautiful blue gradient background)

SIDEBAR (Left Panel) 

┌─────────────────────────────────────┐
│ ⚙️ Settings                         │
├─────────────────────────────────────┤
│ Input Mode:                         │
│ ○ Common Molecules                  │
│ ○ SMILES String                     │
│ ○ Molecule Name (Beta)              │
├─────────────────────────────────────┤
│ 📊 Model Info                       │
│   Validation MAE: 0.0967            │
│   Parameters: 649,345               │
│   Architecture: GAT+SAGE            │
├─────────────────────────────────────┤
│ 📖 Categories                       │
│   ✅ BBB+ (≥0.6): High permeability│
│   ⚠️  BBB± (0.4-0.6): Moderate     │
│   ❌ BBB- (<0.4): Low permeability │
├─────────────────────────────────────┤
│ ℹ️ About                            │
│   This tool uses a hybrid Graph     │
│   Attention Network...              │
└─────────────────────────────────────┘

MAIN PANEL (Center)

Step 1: Select Molecule 

┌────────────────────────────────────────────────────┐
│ Select a Common Molecule                           │
├────────────────────────────────────────────────────┤
│                                                     │
│ Category: [CNS Drugs ▼]                           │
│                                                     │
│ Molecule: [Caffeine ▼]                            │
│   Options:                                         │
│   - Caffeine                                       │
│   - Cocaine                                        │
│   - Morphine                                       │
│   - Nicotine                                       │
│   - Aspirin                                        │
│   - Ibuprofen                                      │
│   - Acetaminophen                                  │
│   - Propranolol                                    │
│                                                     │
│ SMILES: CN1C=NC2=C1C(=O)N(C(=O)N2C)C              │
│                                                     │
└────────────────────────────────────────────────────┘

Step 2: Predict Button 

╔════════════════════════════════════════════════════╗
║   🔮 Predict BBB Permeability                      ║
╚════════════════════════════════════════════════════╝

(Large blue gradient button)

RESULTS DISPLAY

Prediction Box (After clicking predict) 

╔════════════════════════════════════════════════════╗
║                                                     ║
║                   ✅ BBB+                          ║
║                                                     ║
║           HIGH BBB permeability                    ║
║                                                     ║
║                    0.782                           ║
║                                                     ║
╚════════════════════════════════════════════════════╝

(Green gradient for BBB+, Red for BBB-, Orange for BBB±)

Visualizations Side-by-Side

Left Side: Gauge Chart

        BBB Permeability Score

         ┌─────────────────┐
       ╱                     ╲
     ╱    🔴 Red   🟡   🟢   ╲
    │     0.0   0.4  0.6  1.0│
     ╲         ↑             ╱
       ╲      0.782         ╱
         └─────────────────┘
            (Needle points to green zone)

Right Side: Radar Chart

           MW Score
              ╱╲
             ╱  ╲
    H-Acc  ╱    ╲  LogP
          ╱  ⬡   ╲
         ╱        ╲
        ╱──────────╲
     TPSA      H-Donors

Metrics Cards 

┌──────────────┬──────────────┬──────────────┬──────────────┐
│ Molecular    │    LogP      │    TPSA      │  BBB Rules   │
│   Weight     │              │              │              │
│  194.1 Da    │   -1.03      │   61.8 A²    │   ❌ No      │
└──────────────┴──────────────┴──────────────┴──────────────┘

Properties Table 

┌─────────────────────────────────────────────────────────────┐
│ Hydrogen Bonding              │ Structure                   │
│ • H-bond Donors: 0 (≤3)      │ • Rotatable Bonds: 0        │
│ • H-bond Acceptors: 6 (≤7)   │ • Aromatic Rings: 2         │
│                                │ • Total Atoms: 14           │
│ Drug-likeness                 │ BBB Rules Criteria          │
│ • Lipinski Violations: 0/4    │ • MW: 150-450 Da           │
│ • BBB Compliance: ❌ No       │ • LogP: 1-5                │
│                                │ • TPSA: <90 A²             │
└─────────────────────────────────────────────────────────────┘

Warnings Section (if any) 

⚠️ Warnings:
   - LogP outside optimal range (1-5): -1.03

Bar Chart (Molecular Properties) 

     Molecular Properties

MW  ████████░░ 194.2
LogP ██░░░░░░░ -1.03
TPSA ██████░░░ 61.8
H-D  ░░░░░░░░░ 0
H-A  ██████░░░ 6
Rot  ░░░░░░░░░ 0
    0   50   100  150  200

Download Buttons 

┌──────────────────────────┬──────────────────────────┐
│ 📥 Download Results (CSV)│ 📥 Download Results (JSON)│
└──────────────────────────┴──────────────────────────┘

🎯 Example Walkthrough

Testing Caffeine (BBB+)

  1. Select Input Mode: "Common Molecules"
  2. Choose Category: "CNS Drugs"
  3. Select Molecule: "Caffeine"
  4. Click: "🔮 Predict BBB Permeability"
  5. See Results:
    • ✅ BBB+ in green box
    • Score: 0.782
    • Gauge shows in green zone
    • Radar shows drug profile
    • Warning: LogP outside range

Testing Glucose (BBB-)

  1. Select Category: "Simple Molecules"
  2. Select Molecule: "Glucose"
  3. Click Predict
  4. See Results:
    • ❌ BBB- in red box
    • Score: 0.109
    • Gauge shows in red zone
    • Multiple warnings

Custom SMILES Input

  1. Select Input Mode: "SMILES String"
  2. Paste SMILES: c1ccccc1 (Benzene)
  3. Click Predict
  4. See Results:
    • ✅ BBB+ with score 0.802

🎨 Color Guide

Category Colors

  • 🟢 Green (BBB+): High permeability, good for CNS drugs
  • 🟠 Orange (BBB±): Moderate permeability, uncertain
  • 🔴 Red (BBB-): Low permeability, won't cross BBB

Gauge Zones

  • 🔴 Red (0.0-0.4): BBB- zone
  • 🟡 Yellow (0.4-0.6): BBB± zone
  • 🟢 Green (0.6-1.0): BBB+ zone

📊 All Available Molecules

CNS Drugs (8)

  1. Caffeine - Stimulant
  2. Cocaine - Stimulant
  3. Morphine - Opioid
  4. Nicotine - Stimulant
  5. Aspirin - Pain reliever
  6. Ibuprofen - Anti-inflammatory
  7. Acetaminophen - Pain reliever
  8. Propranolol - Beta blocker

Simple Molecules (4)

  1. Ethanol - Alcohol
  2. Benzene - Aromatic
  3. Toluene - Solvent
  4. Glucose - Sugar

Amino Acids (3)

  1. Glycine - Simplest amino acid
  2. Alanine - Small amino acid
  3. Tryptophan - Aromatic amino acid

Neurotransmitters (3)

  1. Dopamine - Reward neurotransmitter
  2. Serotonin - Mood neurotransmitter
  3. GABA - Inhibitory neurotransmitter

💡 Tips for Best Experience

1. Start with Common Molecules

  • Try Caffeine first (BBB+)
  • Then try Glucose (BBB-)
  • Compare the differences!

2. Use SMILES for Custom Molecules

  • Get SMILES from PubChem
  • Paste directly into input
  • Get instant predictions

3. Read the Warnings

  • Understand why predictions are made
  • Learn about molecular properties
  • Optimize your drug candidates

4. Export Results

  • Download as CSV for Excel
  • Download as JSON for programming
  • Keep records of predictions

5. Compare Molecules

  • Try multiple molecules
  • Look at property patterns
  • Understand structure-activity relationships

🖥️ System Requirements

  • Browser: Chrome, Firefox, Edge, Safari
  • Internet: Not required (runs locally)
  • RAM: 2GB minimum
  • Storage: Model file ~7.5 MB

🎬 Quick Start Commands

Windows 

cd C:\Users\nakhi\BBB_System
START_HERE.bat

Linux/Mac 

cd /path/to/BBB_System
export KMP_DUPLICATE_LIB_OK=TRUE
streamlit run app.py

Custom Port 

streamlit run app.py --server.port 8502

📸 Screenshot Guide

When you open the app, you'll see:

  1. Top: Blue gradient header with title
  2. Left: Sidebar with settings and info
  3. Center: Molecule selection area
  4. Bottom: Large predict button
  5. After prediction: Colorful results with charts

The entire interface is:

  • Responsive - Works on any screen size
  • Interactive - Hover for tooltips
  • Beautiful - Professional gradients
  • Fast - Predictions in <1 second

🎉 You're Ready!

To start:

  1. Double-click START_HERE.bat
  2. Browser opens automatically
  3. Select Caffeine from dropdown
  4. Click predict
  5. See beautiful results!

Enjoy your BBB Permeability Predictor! 🧬✨

Questions? Check: