Spaces:
Running
Running
A newer version of the Gradio SDK is available:
6.6.0
📊 Three Listing Methods - Visual Guide
Method Comparison
┌─────────────────────────────────────────────────────────────────────────────┐
│ TEXT vs IMAGE vs VIDEO │
└─────────────────────────────────────────────────────────────────────────────┘
METHOD 1: TEXT
═════════════════════════════════════════════════════════════════════════════
User Flow:
User Types: "3-bed, 2-bath, Lagos, 500k/month, has WiFi, AC"
↓
AI Extracts: bedrooms=3, bathrooms=2, location=Lagos, price=500000, etc.
↓
User Uploads: Images (2-3 photos)
↓
Backend: Validates images (property check) + uploads to Cloudflare
↓
Result: TEXT DATA + VALIDATED PHOTOS
Data Source:
├─ Bedrooms: FROM TEXT ✓
├─ Bathrooms: FROM TEXT ✓
├─ Price: FROM TEXT ✓
├─ Location: FROM TEXT ✓
├─ Title: FROM TEXT ✓
├─ Description: FROM TEXT ✓
├─ Images: VALIDATED FROM UPLOAD ✓
└─ Amenities: FROM TEXT OR IMAGES
UI Shows: Draft card with text-extracted data + photos
User Edits: "Change price to 450k", "Add gym to amenities"
Storage: Images → Cloudflare (smart filenames)
METHOD 2: IMAGE
═════════════════════════════════════════════════════════════════════════════
User Flow:
User Clicks: "List with Photos"
↓
User Uploads: 2-5 photos (NO TEXT DATA PROVIDED)
↓
Backend:
├─ Validates images (property check)
├─ EXTRACTS bedrooms, bathrooms, amenities
├─ GENERATES SHORT title (max 2 sentences)
├─ GENERATES description
├─ Creates smart filenames
└─ Uploads to Cloudflare
↓
AI Analysis Results:
├─ Bedrooms: 3 (detected from images)
├─ Bathrooms: 2 (detected from images)
├─ Amenities: WiFi, AC, Parking, Pool
├─ Title: "Modern 3-Bed Apartment. Great location!" ← SHORT
├─ Description: "Beautiful apartment with modern furnishings..."
└─ Confidence: { bedrooms: 0.95, bathrooms: 0.88, ... }
↓
System Asks: "Location? Address? Price?"
↓
User Provides: "Lagos, Victoria Island, 500,000/month"
↓
Result: COMPLETE LISTING DATA FROM IMAGES + USER-PROVIDED INFO
Data Source:
├─ Bedrooms: FROM IMAGE ANALYSIS ✓
├─ Bathrooms: FROM IMAGE ANALYSIS ✓
├─ Amenities: FROM IMAGE ANALYSIS ✓
├─ Title: AI-GENERATED (SHORT) ✓
├─ Description: AI-GENERATED ✓
├─ Images: VALIDATED & UPLOADED ✓
├─ Price: USER PROVIDED ✓
├─ Location: USER PROVIDED ✓
└─ Address: USER PROVIDED ✓
UI Shows: Draft card with IMAGE-EXTRACTED data + photos
User Edits: "Change title", "Update amenities", "Add bedroom"
Storage: Images → Cloudflare with smart filenames (location_title_date.jpg)
METHOD 3: VIDEO
═════════════════════════════════════════════════════════════════════════════
User Flow:
User Clicks: "List with Video"
↓
User Uploads: Video (walkthrough, 2-5 minutes)
↓
Backend: Uploads to Cloudinary with smart filename
↓
System Suggests: "Video uploaded! Please upload 2-3 photos for analysis"
↓
User Uploads: 2-3 photos
↓
Backend: EXTRACTS data from PHOTOS (same as IMAGE method)
↓
Result: DATA FROM PHOTOS + VIDEO URL
Data Source:
├─ Bedrooms: FROM PHOTO ANALYSIS ✓
├─ Bathrooms: FROM PHOTO ANALYSIS ✓
├─ Amenities: FROM PHOTO ANALYSIS ✓
├─ Title: AI-GENERATED from PHOTOS ✓
├─ Description: AI-GENERATED from PHOTOS ✓
├─ Images: FROM PHOTOS ✓
├─ Video: FROM UPLOADED VIDEO ✓
└─ Price/Location: USER PROVIDED ✓
UI Shows: Draft card with PHOTO data + video embedded
User Edits: Same as IMAGE method
Storage:
├─ Photos → Cloudflare (smart filenames)
└─ Video → Cloudinary
File Storage Comparison
┌─────────────────────────────────────────────────────────────────────────────┐
│ STORAGE LOCATIONS │
└─────────────────────────────────────────────────────────────────────────────┘
TEXT METHOD:
Images → Cloudflare (smart filename)
└─ Example: Lagos_Apartment_2025_01_31_0.jpg
IMAGE METHOD:
Photos → Cloudflare (smart filenames)
├─ Example: Lagos_Modern_Apartment_2025_01_31_0.jpg
├─ Example: Lagos_Modern_Apartment_2025_01_31_1.jpg
└─ Example: Lagos_Modern_Apartment_2025_01_31_2.jpg
VIDEO METHOD:
Photos → Cloudflare (smart filenames)
├─ Example: Lagos_3Bed_Apartment_2025_01_31_0.jpg
├─ Example: Lagos_3Bed_Apartment_2025_01_31_1.jpg
└─ Example: Lagos_3Bed_Apartment_2025_01_31_2.jpg
Video → Cloudinary
└─ Example: Lagos_Property_Video_2025_01_31_0.mp4
Title & Description Details
┌─────────────────────────────────────────────────────────────────────────────┐
│ TITLE (SHORT) vs DESCRIPTION (FULL) │
└─────────────────────────────────────────────────────────────────────────────┘
TITLE GENERATION (IMAGE/VIDEO METHOD):
────────────────────────────────────────
Format: MAX 2 SENTENCES - Keep it SHORT!
✅ GOOD Examples:
- "Modern 3-Bed Apartment. Great location!"
- "Spacious family home with garden."
- "Luxury studio in downtown area. Fully furnished!"
- "Cozy 2-bed with AC and parking. Prime location!"
❌ BAD Examples (too long):
- "This is a beautiful 3-bedroom, 2-bathroom modern apartment with contemporary furnishings..."
- "A stunning property featuring modern amenities, excellent lighting, perfect for families..."
DESCRIPTION GENERATION (IMAGE/VIDEO METHOD):
──────────────────────────────────────────────
Format: FULL 2-3 SENTENCE DESCRIPTION
Example:
"Beautiful 3-bedroom, 2-bathroom modern apartment featuring contemporary
furnishings, air conditioning, WiFi, and private balcony overlooking the
city. Located in a secure, gated community with excellent amenities."
TEXT METHOD:
────────────
User-provided title and description (not generated by AI)
Smart Filename Examples
┌─────────────────────────────────────────────────────────────────────────────┐
│ INTELLIGENT FILENAME GENERATION │
└─────────────────────────────────────────────────────────────────────────────┘
Pattern: {location}_{title}_{timestamp}_{index}.jpg
Examples with different properties:
──────────────────────────────────────
Property 1: 3-bed in Lagos
AI-Generated Title: "Modern Apartment with Pool"
Generated Filenames:
├─ Lagos_Modern_Apartment_With_Pool_2025_01_31_120530_0.jpg
├─ Lagos_Modern_Apartment_With_Pool_2025_01_31_120530_1.jpg
└─ Lagos_Modern_Apartment_With_Pool_2025_01_31_120530_2.jpg
Property 2: Cozy studio in Cotonou
AI-Generated Title: "Affordable Studio Apartment"
Generated Filenames:
├─ Cotonou_Affordable_Studio_Apartment_2025_01_31_145000_0.jpg
└─ Cotonou_Affordable_Studio_Apartment_2025_01_31_145000_1.jpg
Property 3: Luxury 5-bed villa in Victoria Island
AI-Generated Title: "Luxury Villa with Garden"
Generated Filenames:
├─ Victoria_Island_Luxury_Villa_With_Garden_2025_01_31_090000_0.jpg
├─ Victoria_Island_Luxury_Villa_With_Garden_2025_01_31_090000_1.jpg
├─ Victoria_Island_Luxury_Villa_With_Garden_2025_01_31_090000_2.jpg
└─ Victoria_Island_Luxury_Villa_With_Garden_2025_01_31_090000_3.jpg
CLOUDFLARE WORKER DEDUPLICATION:
─────────────────────────────────
If same filename uploaded twice:
1st upload → Lagos_Modern_Apartment_With_Pool_2025_01_31_120530_0.jpg
2nd upload → Lagos_Modern_Apartment_With_Pool_2025_01_31_120530_0_1.jpg
3rd upload → Lagos_Modern_Apartment_With_Pool_2025_01_31_120530_0_2.jpg
Unified Response Format
┌─────────────────────────────────────────────────────────────────────────────┐
│ SAME RESPONSE FORMAT FOR ALL THREE METHODS │
└─────────────────────────────────────────────────────────────────────────────┘
All three methods return the EXACT SAME structure:
{
"success": true,
"listing_method": "text" | "image" | "video", ← Method identifier
"extracted_fields": {
"bedrooms": 3, ← Number or null
"bathrooms": 2, ← Number or null
"amenities": ["WiFi", "AC", "Parking"], ← Array of strings
"description": "Beautiful apartment...", ← Full description (2-3 sentences)
"title": "Modern 3-Bed. Great location!" ← SHORT title (max 2 sentences)
},
"confidence": { ← How confident AI is
"bedrooms": 0.95, ← 0.0 to 1.0
"bathrooms": 0.88,
"amenities": 0.72,
"title": 0.85,
"description": 0.90
},
"image_urls": [ ← Photo URLs
"https://imagedelivery.net/lojiz/Lagos_Modern_Apartment_2025_01_31_0/public",
"https://imagedelivery.net/lojiz/Lagos_Modern_Apartment_2025_01_31_1/public"
],
"video_url": "https://cloudinary.../video.mp4", ← ONLY for video method
"suggestions": [ ← Next steps
"Verify bedroom count",
"Upload more photos for better accuracy"
]
}
FRONTEND RECEIVES:
✓ Same structure
✓ Shows same UI
✓ Same editing experience
✓ Same publishing flow
Only difference: listing_method and video_url (if applicable)
Decision Tree
┌─────────────────────────────────────────────────────────────────────────────┐
│ HOW USER LISTS? │
└─────────────────────────────────────────────────────────────────────────────┘
START
│
▼
Does user have details?
/ \
YES NO
/ \
▼ ▼
Uses CHAT: Uses UPLOAD:
Provides Uploads
details via photos/video
text directly
│ │
│ └──→ Is it a video?
│ / \
│ YES NO
│ / \
│ ▼ ▼
│ VIDEO METHOD IMAGE METHOD
│ (upload video) (upload photos
│ + photos only)
│
└──────────→ Uploads photos to validate
│
▼
TEXT METHOD
(validate
with photos)
│
▼
BACKEND PROCESSES:
┌───────────────────────────────────┐
│ 1. Validate image (property?) │
│ 2. Extract/validate fields │
│ 3. Generate title + description │
│ 4. Create smart filenames │
│ 5. Upload to Cloudflare/Cloudinary│
└───────────────────────────────────┘
│
▼
RETURN SAME FORMAT
(bedrooms, bathrooms,
amenities, title,
description, images,
confidence, video_url)
│
▼
FRONTEND SHOWS
UNIFIED DRAFT UI
│
▼
USER EDITS + PUBLISHES
Quick Reference
METHOD INPUT EXTRACTION OUTPUT
═════════════════════════════════════════════════════════════════════
TEXT Text details From text Complete data
+ photos + validate from text
photos + photos
IMAGE Photos only From images Complete data
(no text) (AI analyzes) from images
VIDEO Video From photos Complete data
+ photos (AI analyzes) from photos
+ video URL
═════════════════════════════════════════════════════════════════════
COMMON THEME: All produce same result → same UI → same experience