Skip to content

Commit b9dad35

Browse files
vaibhavs-mishravaibhavs-mishra
authored
Added new material: (#144)
1. Doodle classifier 2. Linear Regression 3. K-means Clustering 4. SVM Regression Updated existing material with better explanation: 1. Sentiment Analysis
1 parent b85a669 commit b9dad35

File tree

9 files changed

+576
-94
lines changed

9 files changed

+576
-94
lines changed

‎Algolyzer/study/templates/study/doodle_classifier.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
{% extends "base.html" %}
2+
3+
{% block content %}
4+
<div class="max-w-5xl mx-auto py-5 max-sm:p-4">
5+
<h1 class="max-sm:text-4xl max-sm:my-6 text-5xl my-12">
6+
A Beginner's Guide to <span class="text-primary font-bold font-poppins">Doodle Classification</span>
7+
</h1>
8+
9+
<h2 class="max-sm:text-2xl text-3xl my-5 text-primary font-bold">Introduction</h2>
10+
<p class="max-sm:text-lg text-xl">
11+
Doodle classification is a type of image classification that predicts which number (0-9) was drawn by a user.
12+
This is done using a deep learning model trained on the MNIST dataset—a famous dataset of handwritten digits.
13+
</p>
14+
<p class="max-sm:text-lg text-xl mt-3">
15+
In this project, we're using a pre-trained model from Hugging Face called <code>farleyknight/mnist-digit-classification-2022-09-04</code>,
16+
which is specifically trained to recognize digits from rough sketches or "doodles."
17+
</p>
18+
19+
<h2 class="max-sm:text-2xl text-3xl my-5 text-primary font-bold">How Does It Work?</h2>
20+
<ol class="list-decimal list-inside max-sm:text-lg text-xl">
21+
<li>The user draws a digit on a canvas in the browser.</li>
22+
<li>The drawing is converted to a base64 PNG image.</li>
23+
<li>This image is sent to the server and saved temporarily.</li>
24+
<li>The image is passed through a deep learning model.</li>
25+
<li>The model outputs the most likely digit with a confidence score.</li>
26+
</ol>
27+
28+
<h2 class="max-sm:text-2xl text-3xl my-5 text-primary font-bold">Step-by-Step Breakdown</h2>
29+
30+
<h3 class="max-sm:text-xl text-2xl my-4 text-secondary font-bold">Step 1: Capture the Drawing</h3>
31+
<p class="max-sm:text-lg text-xl">
32+
We use an HTML canvas where users draw their digit. The drawing is captured as a base64-encoded image string.
33+
</p>
34+
35+
<div class="mockup-code mt-2">
36+
<pre><code>image_data = request.POST.get("image_data")</code></pre>
37+
</div>
38+
39+
<h3 class="max-sm:text-xl text-2xl my-4 text-secondary font-bold">Step 2: Save the Drawing as an Image</h3>
40+
<p class="max-sm:text-lg text-xl">
41+
The base64 string is decoded and saved as a PNG image, so that it can be read like a normal image file.
42+
</p>
43+
44+
<div class="mockup-code mt-2">
45+
<pre><code>format, imgstr = image_data.split(";base64,")
46+
ext = format.split("/")[-1]
47+
image_file = ContentFile(base64.b64decode(imgstr), name=f"doodle.{ext}")</code></pre>
48+
</div>
49+
50+
<h3 class="max-sm:text-xl text-2xl my-4 text-secondary font-bold">Step 3: Run the Image through the Classifier</h3>
51+
<p class="max-sm:text-lg text-xl">
52+
The image is passed into a pre-trained model that analyzes the pixel patterns and predicts which digit was drawn.
53+
</p>
54+
55+
<div class="mockup-code mt-2">
56+
<pre><code>image = Image.open(task.input_image.path)
57+
result = mnist_classifier(image)</code></pre>
58+
</div>
59+
60+
<h3 class="max-sm:text-xl text-2xl my-4 text-secondary font-bold">Step 4: Get the Best Prediction</h3>
61+
<p class="max-sm:text-lg text-xl">
62+
The model returns a list of possible digits with scores. We choose the one with the highest score.
63+
</p>
64+
65+
<div class="mockup-code mt-2">
66+
<pre><code>best_prediction = max(result, key=lambda x: x["score"])
67+
best_label = best_prediction["label"]</code></pre>
68+
</div>
69+
70+
<h2 class="max-sm:text-2xl text-3xl my-5 text-primary font-bold">Why This Model?</h2>
71+
<ul class="max-sm:text-lg text-xl list-disc list-inside">
72+
<li>✅ Trained on real-world digit images from the MNIST dataset.</li>
73+
<li>✅ Fast and lightweight — ideal for web apps and educational tools.</li>
74+
<li>✅ Easy to integrate using Hugging Face’s <code>pipeline</code> interface.</li>
75+
</ul>
76+
77+
<h2 class="max-sm:text-2xl text-3xl my-5 text-primary font-bold">Try Drawing!</h2>
78+
<p class="max-sm:text-lg text-xl">
79+
Head over to the classifier page and draw a number to see the magic happen in real-time! 🎨
80+
</p>
81+
</div>
82+
{% endblock %}

‎Algolyzer/study/templates/study/home.html‎

Lines changed: 118 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -14,92 +14,158 @@ <h3 class="text-3xl font-semibold capitalize">Sentiment Analysis</h3>
1414
<div class="stat">
1515
<div class="stat-figure text-primary">
1616
<svg
17-
xmlns="http://www.w3.org/2000/svg"
18-
fill="none"
19-
viewBox="0 0 24 24"
20-
class="inline-block h-8 w-8 stroke-current">
21-
<path
22-
stroke-linecap="round"
23-
stroke-linejoin="round"
24-
stroke-width="2"
25-
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
17+
xmlns="http://www.w3.org/2000/svg"
18+
fill="none"
19+
viewBox="0 0 24 24"
20+
class="inline-block h-8 w-8 stroke-current">
21+
<path
22+
stroke-linecap="round"
23+
stroke-linejoin="round"
24+
stroke-width="2"
25+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
2626
</svg>
2727
</div>
28-
<div class="stat-title">Avg Time To Read</div>
29-
<div class="stat-value text-primary">7 Mins</div>
30-
<div class="stat-desc"></div>
28+
<div class="stat-title">Avg Time To Read</div>
29+
<div class="stat-value text-primary">7 Mins</div>
30+
<div class="stat-desc"></div>
3131
</div>
3232

3333
<div class="stat">
34-
<div class="stat-title">Appx. Words</div>
35-
<div class="stat-value text-secondary">1,200</div>
36-
<div class="stat-desc"></div>
34+
<div class="stat-title">Appx. Words</div>
35+
<div class="stat-value text-secondary">1,200</div>
36+
<div class="stat-desc"></div>
3737
</div>
3838
</div>
3939
</div>
4040
</a>
41-
42-
{% comment %} Text Classifier {% endcomment %}
43-
<a href="#" class="card bg-base-200 shadow-xl lg:p-4 hover:bg-base-300 border-solid border-primary border-2 hover:border-secondary">
41+
42+
{% comment %} Doodle Classifier {% endcomment %}
43+
<a href="{% url 'doodle_classifier_study' %}" class="card bg-base-200 shadow-xl lg:p-4 hover:bg-base-300 border-solid border-primary border-2 hover:border-secondary">
44+
<div class="card-body">
45+
<h3 class="text-3xl font-semibold capitalize">Doodle Classifier</h3>
46+
<div class="stats stats-vertical lg:stats-horizontal shadow">
47+
<div class="stat">
48+
<div class="stat-figure text-primary">
49+
<svg
50+
xmlns="http://www.w3.org/2000/svg"
51+
fill="none"
52+
viewBox="0 0 24 24"
53+
class="inline-block h-8 w-8 stroke-current">
54+
<path
55+
stroke-linecap="round"
56+
stroke-linejoin="round"
57+
stroke-width="2"
58+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
59+
</svg>
60+
</div>
61+
<div class="stat-title">Avg Time To Read</div>
62+
<div class="stat-value text-primary">4 Mins</div>
63+
<div class="stat-desc"></div>
64+
</div>
65+
66+
<div class="stat">
67+
<div class="stat-title">Appx. Words</div>
68+
<div class="stat-value text-secondary">550</div>
69+
<div class="stat-desc"></div>
70+
</div>
71+
</div>
72+
</div>
73+
</a>
74+
75+
{% comment %} Linear Regression {% endcomment %}
76+
<a href="{% url 'linear_regression_study' %}" class="card bg-base-200 shadow-xl lg:p-4 hover:bg-base-300 border-solid border-primary border-2 hover:border-secondary">
77+
<div class="card-body">
78+
<h3 class="text-3xl font-semibold capitalize">Linear Regression</h3>
79+
<div class="stats stats-vertical lg:stats-horizontal shadow">
80+
<div class="stat">
81+
<div class="stat-figure text-primary">
82+
<svg
83+
xmlns="http://www.w3.org/2000/svg"
84+
fill="none"
85+
viewBox="0 0 24 24"
86+
class="inline-block h-8 w-8 stroke-current">
87+
<path
88+
stroke-linecap="round"
89+
stroke-linejoin="round"
90+
stroke-width="2"
91+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
92+
</svg>
93+
</div>
94+
<div class="stat-title">Avg Time To Read</div>
95+
<div class="stat-value text-primary">3 Mins</div>
96+
<div class="stat-desc"></div>
97+
</div>
98+
99+
<div class="stat">
100+
<div class="stat-title">Appx. Words</div>
101+
<div class="stat-value text-secondary">500</div>
102+
<div class="stat-desc"></div>
103+
</div>
104+
</div>
105+
</div>
106+
</a>
107+
108+
{% comment %} K-Means Clustering {% endcomment %}
109+
<a href="{% url 'k_means_clustering' %}" class="card bg-base-200 shadow-xl lg:p-4 hover:bg-base-300 border-solid border-primary border-2 hover:border-secondary">
44110
<div class="card-body">
45-
<h3 class="text-3xl font-semibold capitalize">Text Classifier</h3>
111+
<h3 class="text-3xl font-semibold capitalize">K-Means Clustering</h3>
46112
<div class="stats stats-vertical lg:stats-horizontal shadow">
47113
<div class="stat">
48114
<div class="stat-figure text-primary">
49115
<svg
50-
xmlns="http://www.w3.org/2000/svg"
51-
fill="none"
52-
viewBox="0 0 24 24"
53-
class="inline-block h-8 w-8 stroke-current">
54-
<path
55-
stroke-linecap="round"
56-
stroke-linejoin="round"
57-
stroke-width="2"
58-
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
116+
xmlns="http://www.w3.org/2000/svg"
117+
fill="none"
118+
viewBox="0 0 24 24"
119+
class="inline-block h-8 w-8 stroke-current">
120+
<path
121+
stroke-linecap="round"
122+
stroke-linejoin="round"
123+
stroke-width="2"
124+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
59125
</svg>
60126
</div>
61-
<div class="stat-title">Avg Time To Read</div>
62-
<div class="stat-value text-primary">3 Mins</div>
63-
<div class="stat-desc"></div>
127+
<div class="stat-title">Avg Time To Read</div>
128+
<div class="stat-value text-primary">4 Mins</div>
129+
<div class="stat-desc"></div>
64130
</div>
65131

66132
<div class="stat">
67-
<div class="stat-title">Appx. Words</div>
68-
<div class="stat-value text-secondary">500</div>
69-
<div class="stat-desc"></div>
133+
<div class="stat-title">Appx. Words</div>
134+
<div class="stat-value text-secondary">550</div>
135+
<div class="stat-desc"></div>
70136
</div>
71137
</div>
72138
</div>
73139
</a>
74140

75-
{% comment %} Image Recognition {% endcomment %}
76-
<a href="#" class="card bg-base-200 shadow-xl lg:p-4 hover:bg-base-300 border-solid border-primary border-2 hover:border-secondary">
141+
{% comment %} SVM Regression {% endcomment %}
142+
<a href="{% url 'svm_regression' %}" class="card bg-base-200 shadow-xl lg:p-4 hover:bg-base-300 border-solid border-primary border-2 hover:border-secondary">
77143
<div class="card-body">
78-
<h3 class="text-3xl font-semibold capitalize">Image Recognition</h3>
144+
<h3 class="text-3xl font-semibold capitalize">SVM Regression</h3>
79145
<div class="stats stats-vertical lg:stats-horizontal shadow">
80146
<div class="stat">
81147
<div class="stat-figure text-primary">
82148
<svg
83-
xmlns="http://www.w3.org/2000/svg"
84-
fill="none"
85-
viewBox="0 0 24 24"
86-
class="inline-block h-8 w-8 stroke-current">
87-
<path
88-
stroke-linecap="round"
89-
stroke-linejoin="round"
90-
stroke-width="2"
91-
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
149+
xmlns="http://www.w3.org/2000/svg"
150+
fill="none"
151+
viewBox="0 0 24 24"
152+
class="inline-block h-8 w-8 stroke-current">
153+
<path
154+
stroke-linecap="round"
155+
stroke-linejoin="round"
156+
stroke-width="2"
157+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
92158
</svg>
93159
</div>
94-
<div class="stat-title">Avg Time To Read</div>
95-
<div class="stat-value text-primary">15 Mins</div>
96-
<div class="stat-desc"></div>
160+
<div class="stat-title">Avg Time To Read</div>
161+
<div class="stat-value text-primary">4 Mins</div>
162+
<div class="stat-desc"></div>
97163
</div>
98164

99165
<div class="stat">
100-
<div class="stat-title">Appx. Words</div>
101-
<div class="stat-value text-secondary">3,700</div>
102-
<div class="stat-desc"></div>
166+
<div class="stat-title">Appx. Words</div>
167+
<div class="stat-value text-secondary">600</div>
168+
<div class="stat-desc"></div>
103169
</div>
104170
</div>
105171
</div>

0 commit comments

Comments
 (0)