Hugging Face's logo

Spaces:
Ransted
/
shelf-scanner
Sleeping

App Files Community
shelf-scanner
File size: 3,526 Bytes 
c43d2a6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
// --- Section control ---
function showSection(sectionId) {
    ['search-section','scanner-form-section','manual-search-section','recommender-section','details-section']
    .forEach(id => document.getElementById(id).style.display = 'none');
    document.getElementById(sectionId).style.display = 'flex';
}

function goBackToStart() {
    showSection('search-section');
}

// --- Button handlers ---
document.getElementById('snap-option').addEventListener('click', () => showSection('scanner-form-section'));
document.getElementById('search-option').addEventListener('click', () => showSection('manual-search-section'));
document.getElementById('recommender-option').addEventListener('click', () => showSection('recommender-section'));

// --- Image upload & backend call ---
document.getElementById('scan-submit-button').addEventListener('click', async () => {
    const button = document.getElementById('scan-submit-button');
    button.textContent = 'Scanning...';
    button.disabled = true;

    const fileInput = document.getElementById('book-image');
    if (!fileInput.files.length) {
        alert("Please upload an image first.");
        button.textContent = 'Find Book Details';
        button.disabled = false;
        return;
    }

    const formData = new FormData();
    formData.append("image", fileInput.files[0]);
    const genre = document.getElementById('genre-input')?.value || "";
    formData.append("genre", genre);

    try {
        const HF_API = "https://ransted-shelf-scanner.hf.space/api/predict/";
        const res = await fetch(HF_API, { method: "POST", body: formData });
        const data = await res.json();
        if (data.data && data.data[0].books.length > 0) {
            showBookDetails(data.data[0].books[0]);
        } else {
            alert("No books detected. Try again with a clearer image.");
        }
    } catch (err) {
        console.error(err);
        alert("Error contacting server.");
    }

    button.textContent = 'Find Book Details';
    button.disabled = false;
});

// --- Display book details ---
function showBookDetails(data) {
    showSection('details-section');

    document.getElementById('book-cover').src = data.cover_image || 'https://via.placeholder.com/200x300?text=No+Cover';
    document.getElementById('book-title').textContent = data.title;
    document.getElementById('book-author').textContent = 'By ' + (data.authors || "Unknown");
    document.getElementById('book-genre').textContent = data.publisher || "N/A";
    document.getElementById('book-synopsis').textContent = data.description || "No description available";
    document.getElementById('book-isbn').textContent = data.isbn ? `ISBN: ${data.isbn}` : "ISBN: Not found";

    // Ratings placeholder
    document.getElementById('book-stars').textContent = "⭐⭐⭐⭐";
    document.getElementById('review-count').textContent = "N/A";

    // Recommendations placeholder
    document.getElementById('recommendations-list').innerHTML = "<p>No recommendations implemented yet.</p>";

    // Price links
    const priceTableBody = document.getElementById('price-table-body');
    priceTableBody.innerHTML = '';
    for (const [store, link] of Object.entries(data.buy_links || {})) {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${store}</td>
            <td>-</td>
            <td>-</td>
            <td><a href="${link}" target="_blank" class="shop-link">Shop Now</a></td>
        `;
        priceTableBody.appendChild(row);
    }
}