File size: 5,315 Bytes
7505319
 
 
 
 
55acd9b
7505319
 
 
 
 
 
 
 
55acd9b
 
7505319
 
55acd9b
7505319
55acd9b
 
 
7505319
55acd9b
 
 
 
 
7505319
55acd9b
 
7505319
55acd9b
7505319
 
55acd9b
 
 
 
 
 
 
 
 
 
7505319
55acd9b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7505319
 
 
55acd9b
 
 
 
7505319
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ML Nexus</title>
    <link rel="stylesheet" href="/static/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header>
            <h1>ML Nexus</h1>
            <p>Your one-stop hub for ML model inference.</p>
        </header>

        <nav class="model-selector">
            <button id="sentiment-btn" class="model-btn active">Sentiment Analysis</button>
            <button id="catdog-btn" class="model-btn">Cat & Dog Classifier</button>
            <button id="housing-btn" class="model-btn">House Price Predictor</button>
        </nav>

        <main>
            <!-- Sentiment Analysis Section -->
            <div id="sentiment-section" class="model-section active">
                <h2>Sentiment Analysis <span class="beta-tag">Beta</span></h2>
                <p>Enter text to classify its sentiment (Bearish or Bullish). This model is in beta, and its accuracy may vary.</p>
                <form id="sentiment-form">
                    <textarea id="sentiment-text" name="text" rows="4" placeholder="Enter text here..."></textarea>
                    <button type="submit">Predict Sentiment</button>
                </form>
                <div id="sentiment-result" class="result"></div>
            </div>

            <!-- Cat & Dog Classifier Section -->
            <div id="catdog-section" class="model-section">
                <h2>Cat & Dog Classifier</h2>
                <p>Upload an image to classify it as a cat or a dog.</p>
                <form id="catdog-form">
                    <input type="file" id="catdog-file" name="file" accept="image/*">
                    <div class="image-preview-container">
                        <img id="image-preview" src="#" alt="Image Preview" class="image-preview"/>
                    </div>
                    <button type="submit">Classify Image</button>
                </form>
                <div id="catdog-result" class="result"></div>
            </div>

            <!-- California Housing Price Predictor Section -->
            <div id="housing-section" class="model-section">
                <h2>California House Price Predictor</h2>
                <p>Enter the details below to predict the median house value.</p>
                <form id="housing-form">
                    <div class="form-grid">
                        <div class="form-group">
                            <label for="MedInc">Median Income</label>
                            <input type="number" step="any" id="MedInc" name="MedInc" placeholder="e.g., 8.3252" required>
                        </div>
                        <div class="form-group">
                            <label for="HouseAge">House Age</label>
                            <input type="number" step="any" id="HouseAge" name="HouseAge" placeholder="e.g., 41.0" required>
                        </div>
                        <div class="form-group">
                            <label for="AveRooms">Average Rooms</label>
                            <input type="number" step="any" id="AveRooms" name="AveRooms" placeholder="e.g., 6.9841" required>
                        </div>
                        <div class="form-group">
                            <label for="AveBedrms">Average Bedrooms</label>
                            <input type="number" step="any" id="AveBedrms" name="AveBedrms" placeholder="e.g., 1.0238" required>
                        </div>
                        <div class="form-group">
                            <label for="Population">Population</label>
                            <input type="number" step="any" id="Population" name="Population" placeholder="e.g., 322.0" required>
                        </div>
                        <div class="form-group">
                            <label for="AveOccup">Average Occupancy</label>
                            <input type="number" step="any" id="AveOccup" name="AveOccup" placeholder="e.g., 2.5555" required>
                        </div>
                        <div class="form-group">
                            <label for="Latitude">Latitude</label>
                            <input type="number" step="any" id="Latitude" name="Latitude" placeholder="e.g., 37.88" required>
                        </div>
                        <div class="form-group">
                            <label for="Longitude">Longitude</label>
                            <input type="number" step="any" id="Longitude" name="Longitude" placeholder="e.g., -122.23" required>
                        </div>
                    </div>
                    <button type="submit">Predict Price</button>
                </form>
                <div id="housing-result" class="result"></div>
            </div>
        </main>

        <footer>
            <p>&copy; 2025 ML Nexus. All rights reserved.</p>
        </footer>
    </div>
    <script src="/static/script.js"></script>
</body>
</html>