Hugging Face's logo

Spaces:
aheedsajid
/
AuthentiCheck
Running

App Files Community
AuthentiCheck
File size: 5,437 Bytes 
7c8c873
 
 
 
 
 
4b72205
7c8c873
 
 
 
 
 
 
 
5140fae
7c8c873
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AuthentiCheck - AI Product Authentication</title>
    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="hero">
            <div class="hero-content">
                <h1 class="hero-title">
                    <span class="gradient-text">AuthentiCheck</span>
                </h1>
                <p class="hero-subtitle">AI-powered product authentication in seconds. Check if the product is real or fake!</p>
                <div class="hero-visual">
                    <div class="scan-animation">
                        <div class="scan-line"></div>
                        <div class="scan-grid"></div>
                    </div>
                </div>
            </div>
        </header>

        <main class="main-content">
            <div class="auth-section">
                <div class="card glass">
                    <div class="card-header">
                        <h2>API Configuration</h2>
                        <div class="status-indicator" id="apiStatus">
                            <span class="status-dot"></span>
                            <span class="status-text">API Key Required</span>
                        </div>
                    </div>
                    <div class="api-info">
                        <p>Get your free API key from <a href="https://rapidapi.com/projectunpack/api/product-authentication-api-fake-vs-real-item-detector" target="_blank" rel="noopener noreferrer">RapidAPI</a></p>
                    </div>
                    <div class="input-group">
                        <input 
                            type="password" 
                            id="apiKey" 
                            placeholder="Enter your RapidAPI key..."
                            class="api-input"
                        >
                        <button class="btn btn-primary" onclick="saveApiKey()">
                            <span class="btn-text">Save Key</span>
                            <div class="btn-loader"></div>
                        </button>
                    </div>
                </div>
            </div>

            <div class="check-section">
                <div class="card glass">
                    <div class="card-header">
                        <h2>Product Authentication</h2>
                        <div class="upload-stats">
                            <span id="uploadCount">0</span> items checked
                        </div>
                    </div>
                    
                    <div class="input-group">
                        <input 
                            type="text" 
                            id="imageUrlInput" 
                            placeholder="Enter product image URL..."
                            class="api-input"
                        >
                        <!-- No direct upload button needed here, it's for URL input -->
                    </div>
                    <p class="input-hint">Supports JPG, PNG, WebP up to 10MB</p>

                    <div class="action-buttons">
                        <button class="btn btn-secondary" onclick="clearAll()">
                            Clear
                        </button>
                        <button class="btn btn-primary btn-large" onclick="checkAuthenticity()" disabled id="checkBtn">
                            <span class="btn-text">Analyze Product</span>
                            <div class="btn-loader"></div>
                        </button>
                    </div>
                </div>
            </div>

            <div class="result-section" id="resultSection" style="display: none;">
                <div class="card glass">
                    <div class="result-header">
                        <h2>Authentication Result</h2>
                        <div class="result-badge" id="resultBadge">
                            <span class="badge-icon"></span>
                            <span class="badge-text">Analyzing...</span>
                        </div>
                    </div>
                    
                    <div class="result-content">
                        <div class="result-image">
                            <img id="resultImage" src="" alt="Analyzed product">
                        </div>
                        
                        <div class="result-details">
                            <div class="detail-item">
                                <label>Brand</label>
                                <span id="resultBrand">-</span>
                            </div>
                            <div class="detail-item">
                                <label>Status</label>
                                <span id="resultStatus">-</span>
                            </div>
                            <div class="detail-item">
                                <label>Description</label>
                                <p id="resultDescription">-</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="script.js"></script>
</body>
</html>