Skip to content

Commit b85a669

Browse files
Priyanshu-BathamPriyanshu-Batham
authored
added new model svm (#143)
1 parent 553e6c0 commit b85a669

File tree

4 files changed

+384
-0
lines changed

4 files changed

+384
-0
lines changed

‎Algolyzer/playground/templates/playground/home.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,57 @@ <h1 class="text-4xl my-2 p-4 text-primary">K-Means Clustering</h1>
112112
</div>
113113
</div>
114114

115+
{% comment %} SVM {% endcomment %}
116+
<div class="rounded-xl border-2 border-solid border-primary p-5 hover:border-secondary">
117+
<div class="flex md:items-center justify-between md:flex-row flex-col">
118+
<h1 class="text-4xl my-2 p-4 text-primary">Support Vector Regression</h1>
119+
<div class="flex gap-4">
120+
<a href="{% url "svm_regression" %}" class="btn text-white btn-accent font-bold font-poppins max-md:flex-1">Try Now</a>
121+
<a href="#" class="btn btn-primary btn-outline max-md:flex-1">Learn More</a>
122+
</div>
123+
</div>
124+
<div class="flex flex-col md:flex-row gap-4">
125+
{% comment %} Left Segment {% endcomment %}
126+
<div>
127+
<div class="stats shadow max-w-lg">
128+
<div class="stat">
129+
<div class="stat-title">Accuracy</div>
130+
<div class="stat-value text-primary">85%</div>
131+
<div class="stat-desc">↗︎ 400 (22%)</div>
132+
</div>
133+
134+
<div class="stat">
135+
<div class="stat-title">Ratings</div>
136+
<div class="stat-value">
137+
<form class="rating rating-md rating-half">
138+
<input type="radio" name="rating-10" class="mask mask-star-2 mask-half-1 bg-yellow-400" disabled/>
139+
<input type="radio" name="rating-10" class="mask mask-star-2 mask-half-2 bg-yellow-400" disabled/>
140+
<input
141+
type="radio"
142+
name="rating-10"
143+
class="mask mask-star-2 mask-half-1 bg-yellow-400" disabled/>
144+
<input type="radio" name="rating-10" class="mask mask-star-2 mask-half-2 bg-yellow-400" disabled/>
145+
<input type="radio" name="rating-10" class="mask mask-star-2 mask-half-1 bg-yellow-400"disabled/>
146+
<input type="radio" name="rating-10" class="mask mask-star-2 mask-half-2 bg-yellow-400" disabled/>
147+
<input type="radio" name="rating-10" class="mask mask-star-2 mask-half-1 bg-yellow-400" disabled/>
148+
<input type="radio" name="rating-10" class="mask mask-star-2 mask-half-2 bg-yellow-400" checked="checked" disabled/>
149+
<input type="radio" name="rating-10" class="mask mask-star-2 mask-half-1 bg-yellow-400" disabled/>
150+
<input type="radio" name="rating-10" class="mask mask-star-2 mask-half-2 bg-yellow-400" disabled/>
151+
</form>
152+
</div>
153+
<div class="stat-desc">↘︎ 90 (14%)</div>
154+
</div>
155+
</div>
156+
</div>
157+
158+
{% comment %} Right Segment {% endcomment %}
159+
<div>
160+
<p>{% lorem 1 b random %}
161+
</p>
162+
</div>
163+
</div>
164+
</div>
165+
115166
{% comment %} Sentiment Analysis {% endcomment %}
116167
<div class="rounded-xl border-2 border-solid border-primary p-5 hover:border-secondary">
117168
<div class="flex md:items-center justify-between md:flex-row flex-col">

‎Algolyzer/playground/templates/playground/svm_regression.html‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
{% extends "base.html" %}
2+
3+
{% block extra_head %}
4+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
5+
{% endblock %}
6+
7+
{% block content %}
8+
<div class="max-w-5xl mx-auto my-5 p-2 bg-base-200 shadow-lg ">
9+
<div class="p-2 lg:p-5 rounded-xl border-2 border-solid border-primary">
10+
<h1 class="text-4xl font-bold text-center my-5">Support Vector Regression</h1>
11+
12+
13+
<form method="POST" class="space-y-4" id="svmForm">
14+
{% csrf_token %}
15+
<div class="px-4">
16+
<label class="block text-lg font-semibold mb-2">Enter values:</label>
17+
<div class="flex flex-col gap-2 mb-4">
18+
<div class="flex gap-2">
19+
<input type="number" id="tempInput" name="temp_value" class="input input-bordered w-full max-w-xs" placeholder="Temperature (°C)" step="any">
20+
<input type="number" id="humInput" name="hum_value" class="input input-bordered w-full max-w-xs" placeholder="Humidity (%)" step="any" min="0" max="100">
21+
</div>
22+
<button type="button" onclick="addValues()" class="btn btn-secondary w-full max-w-xs">Add</button>
23+
</div>
24+
<div id="valuesList" class="mb-4">
25+
<p><strong>Added Values:</strong> <span id="displayValues">None</span></p>
26+
</div>
27+
<input type="hidden" name="values" id="valuesInput">
28+
</div>
29+
30+
<button type="submit" class="btn btn-primary w-full">Submit</button>
31+
</form>
32+
33+
{% if error %}
34+
<div class="px-4 py-4">
35+
<div class="alert alert-error">
36+
<p>{{ error }}</p>
37+
</div>
38+
</div>
39+
{% endif %}
40+
41+
{% if processed_values %}
42+
<div class="px-4 py-4">
43+
<div class="card bg-base-100 shadow-xl">
44+
<div class="card-body">
45+
<h2 class="card-title text-2xl">Results</h2>
46+
<div class="grid gap-4">
47+
<!-- Predicted Values -->
48+
<div class="stats shadow">
49+
<div class="stat">
50+
<div class="stat-title">Predicted Temperature</div>
51+
<div class="stat-value text-primary">{{ predicted_value.temp }}°C</div>
52+
</div>
53+
<div class="stat">
54+
<div class="stat-title">Predicted Humidity</div>
55+
<div class="stat-value text-secondary">{{ predicted_value.hum }}%</div>
56+
</div>
57+
</div>
58+
<!-- Input Values -->
59+
<div>
60+
<h3 class="text-lg font-semibold mb-2">Input Values</h3>
61+
<div class="overflow-x-auto">
62+
<table class="table table-zebra w-full">
63+
<thead>
64+
<tr>
65+
<th>#</th>
66+
<th>Temperature (°C)</th>
67+
<th>Humidity (%)</th>
68+
</tr>
69+
</thead>
70+
<tbody>
71+
{% for point in processed_values %}
72+
<tr>
73+
<td>{{ point.index }}</td>
74+
<td>{{ point.temp }}</td>
75+
<td>{{ point.hum }}</td>
76+
</tr>
77+
{% endfor %}
78+
</tbody>
79+
</table>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
{% endif %}
87+
88+
{% if show_chart %}
89+
<div class="px-4 py-4">
90+
<div class="card bg-base-100 shadow-xl">
91+
<div class="card-body">
92+
<h2 class="card-title">Support Vector Regression Chart</h2>
93+
<canvas id="svmChart"></canvas>
94+
</div>
95+
</div>
96+
</div>
97+
{% endif %}
98+
</div>
99+
</div>
100+
{% endblock %}
101+
102+
{% block scripts %}
103+
<script>
104+
let values = [];
105+
106+
function addValues() {
107+
const tempInput = document.getElementById('tempInput');
108+
const humInput = document.getElementById('humInput');
109+
const temp = parseFloat(tempInput.value);
110+
const hum = parseFloat(humInput.value);
111+
112+
if (!isNaN(temp) && !isNaN(hum)) {
113+
values.push([temp, hum]);
114+
updateValuesDisplay();
115+
tempInput.value = ''; // Clear input fields
116+
humInput.value = '';
117+
} else {
118+
alert('Please enter valid numbers for both temperature and humidity');
119+
}
120+
}
121+
122+
function updateValuesDisplay() {
123+
const display = document.getElementById('displayValues');
124+
const valuesInput = document.getElementById('valuesInput');
125+
126+
if (values.length > 0) {
127+
display.textContent = values.map(v => `(${v[0]}°C, ${v[1]}%)`).join(', ');
128+
valuesInput.value = JSON.stringify(values); // Store values in hidden input
129+
} else {
130+
display.textContent = 'None';
131+
valuesInput.value = '';
132+
}
133+
}
134+
135+
// Update hidden input before form submission
136+
document.getElementById('svmForm').addEventListener('submit', function() {
137+
document.getElementById('valuesInput').value = JSON.stringify(values);
138+
});
139+
140+
141+
{% if show_chart %}
142+
// Prepare data for Chart.js
143+
const chartData = {{ chart_data|safe }};
144+
const ctx = document.getElementById('svmChart').getContext('2d');
145+
146+
// Prepare datasets
147+
const tempData = chartData.historical.map(point => ({
148+
x: point.index,
149+
y: point.temp
150+
})).concat([{
151+
x: chartData.predicted.index,
152+
y: chartData.predicted.temp
153+
}]);
154+
155+
const humData = chartData.historical.map(point => ({
156+
x: point.index,
157+
y: point.hum
158+
})).concat([{
159+
x: chartData.predicted.index,
160+
y: chartData.predicted.hum
161+
}]);
162+
163+
// Render line chart
164+
new Chart(ctx, {
165+
type: 'line',
166+
data: {
167+
datasets: [
168+
{
169+
label: 'Temperature (°C)',
170+
data: tempData,
171+
borderColor: 'rgba(255, 99, 132, 1)',
172+
backgroundColor: 'rgba(255, 99, 132, 0.2)',
173+
fill: false,
174+
yAxisID: 'y-temp',
175+
pointRadius: (context) => context.dataIndex === tempData.length - 1 ? 8 : 5,
176+
pointBackgroundColor: (context) => context.dataIndex === tempData.length - 1 ? 'rgba(255, 99, 132, 1)' : 'rgba(255, 99, 132, 0.5)',
177+
pointBorderColor: 'rgba(255, 99, 132, 1)',
178+
tension: 0.1
179+
},
180+
{
181+
label: 'Humidity (%)',
182+
data: humData,
183+
borderColor: 'rgba(54, 162, 235, 1)',
184+
backgroundColor: 'rgba(54, 162, 235, 0.2)',
185+
fill: false,
186+
yAxisID: 'y-hum',
187+
pointRadius: (context) => context.dataIndex === humData.length - 1 ? 8 : 5,
188+
pointBackgroundColor: (context) => context.dataIndex === humData.length - 1 ? 'rgba(54, 162, 235, 1)' : 'rgba(54, 162, 235, 0.5)',
189+
pointBorderColor: 'rgba(54, 162, 235, 1)',
190+
tension: 0.1
191+
}
192+
]
193+
},
194+
options: {
195+
responsive: true,
196+
scales: {
197+
x: {
198+
title: {
199+
display: true,
200+
text: 'Time Step'
201+
},
202+
type: 'linear',
203+
ticks: {
204+
stepSize: 1
205+
}
206+
},
207+
'y-temp': {
208+
type: 'linear',
209+
display: true,
210+
position: 'left',
211+
title: {
212+
display: true,
213+
text: 'Temperature (°C)'
214+
},
215+
grid: {
216+
drawOnChartArea: true
217+
}
218+
},
219+
'y-hum': {
220+
type: 'linear',
221+
display: true,
222+
position: 'right',
223+
title: {
224+
display: true,
225+
text: 'Humidity (%)'
226+
},
227+
grid: {
228+
drawOnChartArea: false
229+
},
230+
min: 0,
231+
max: 100
232+
}
233+
},
234+
plugins: {
235+
legend: {
236+
display: true
237+
},
238+
tooltip: {
239+
callbacks: {
240+
label: function(context) {
241+
const isPredicted = context.dataIndex === context.dataset.data.length - 1;
242+
const label = context.dataset.label;
243+
const value = context.parsed.y;
244+
return `${label}: ${value}${label.includes('Temperature') ? '°C' : '%'}${isPredicted ? ' (Predicted)' : ''}`;
245+
}
246+
}
247+
}
248+
}
249+
}
250+
});
251+
{% endif %}
252+
</script>
253+
{% endblock %}

‎Algolyzer/playground/urls.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@
66
linear_regression,
77
playground_home,
88
sentiment_analysis,
9+
svm_regression,
910
)
1011

1112
urlpatterns = [
1213
path("", playground_home, name="playground_home"),
1314
path("linear_regression", linear_regression, name="linear_regression"),
1415
path("kmeans_clustering", kmeans_clustering, name="kmeans_clustering"),
16+
path("svm_regression", svm_regression, name="svm_regression"),
1517
path("sentiment_analysis/", sentiment_analysis, name="sentiment_analysis"),
1618
path("doodle_classifier/", doodle_classifier, name="doodle_classifier"),
1719
]

0 commit comments

Comments
 (0)