Hugging Face's logo

Spaces:
Azizahalq
/
MaterialMind
Sleeping

App Files Community
Azizahalq commited on
Commit
177fad2
·
1 Parent(s): 64e6a35

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +56 -63
templates/index.html CHANGED
@@ -1,87 +1,81 @@
1
  {% extends "base.html" %}
2
  {% block content %}
3
 
4
- <!-- Background tiles -->
5
  <div class="bg-gallery">
6
- <div class="bg-tile"
7
- style="--bg: url('{{ url_for('static', filename='img/11.png') }}');"
8
- aria-label="MaterialMind in action"></div>
9
- <div class="bg-tile"
10
- style="--bg: url('{{ url_for('static', filename='img/22.jpg') }}');"
11
- aria-label="Industrial materials context"></div>
12
  </div>
13
 
14
  <h2>Find and rank materials</h2>
15
 
16
  <form action="{{ url_for('recommend') }}" method="post" class="grid" id="mmForm">
17
  <label>Application
18
- <input name="environment" placeholder="seawater / sour service / high-T oxidation"
19
- value="">
20
  </label>
21
  <label>Temperature
22
- <input name="temperature" placeholder="e.g., 20–25 °C" value="">
23
  </label>
24
  <label>Min UTS (MPa)
25
- <input name="min_uts" type="number" min="0" step="10" placeholder="e.g., 900" value="">
26
  </label>
27
  <label>Max density (g/cm³)
28
- <input name="max_density" type="number" min="0" step="0.1" placeholder="e.g., 8.2" value="">
29
  </label>
30
  <label>Budget
31
- <input name="budget" placeholder="open / low / medium / high" value="">
32
  </label>
33
  <label>Process
34
- <input name="process" placeholder="wrought / casting / AM / any" value="">
35
  </label>
36
 
37
- <!-- PRIORITIES ONLY (no numbers displayed) -->
38
- <fieldset class="prefs" id="prefsBox">
39
- <legend>Priorities</legend>
40
 
41
- <div class="pref-row">
42
  <label>Performance</label>
43
- <select class="prio" data-target="w_perf" name="p_perf">
44
- <option value="very_high">Very high</option>
45
- <option value="high" selected>High</option>
46
- <option value="medium">Medium</option>
47
- <option value="low">Low</option>
48
- <option value="very_low">Very low</option>
49
  </select>
50
- <input type="hidden" name="w_perf" value="75">
51
  </div>
52
 
53
- <div class="pref-row">
54
  <label>Stability</label>
55
- <select class="prio" data-target="w_stab" name="p_stab">
56
- <option value="very_high" selected>Very high</option>
57
- <option value="high">High</option>
58
- <option value="medium">Medium</option>
59
- <option value="low">Low</option>
60
- <option value="very_low">Very low</option>
61
  </select>
62
  <input type="hidden" name="w_stab" value="100">
63
  </div>
64
 
65
- <div class="pref-row">
66
- <label>Cost</label>
67
- <select class="prio" data-target="w_cost" name="p_cost">
68
- <option value="not_important">Not important</option>
69
- <option value="high" selected>High</option>
70
- <option value="medium">Medium</option>
71
- <option value="low">Low</option>
72
- <option value="very_low">Very low</option>
73
  </select>
74
- <input type="hidden" name="w_cost" value="75">
75
  </div>
76
 
77
- <div class="pref-row">
78
  <label>Availability</label>
79
- <select class="prio" data-target="w_avail" name="p_avail">
80
- <option value="very_high">Very high</option>
81
- <option value="high" selected>High</option>
82
- <option value="medium">Medium</option>
83
- <option value="low">Low</option>
84
- <option value="very_low">Very low</option>
85
  </select>
86
  <input type="hidden" name="w_avail" value="75">
87
  </div>
@@ -92,7 +86,7 @@
92
  </label>
93
 
94
  <div class="actions">
95
- <button class="btn" id="submitBtn" type="submit">Get ranked shortlist</button>
96
  </div>
97
  </form>
98
 
@@ -108,22 +102,21 @@
108
 
109
  <script>
110
  (function () {
111
- // Priority -> hidden numeric weight (0..100), independent
112
- const mapStandard = { very_high: 100, high: 75, medium: 50, low: 25, very_low: 0 };
113
- const mapCost = { not_important: 0, high: 75, medium: 50, low: 25, very_low: 10 };
114
 
115
- function applyMapping(select){
116
- const target = select.dataset.target;
117
- const hidden = document.querySelector(`input[name="${target}"]`);
118
- const isCost = (target === "w_cost");
119
- const m = isCost ? mapCost : mapStandard;
120
- hidden.value = m[select.value] ?? 50;
121
- }
122
 
123
- document.querySelectorAll('select.prio').forEach(sel => {
124
- sel.addEventListener('change', () => applyMapping(sel));
125
- applyMapping(sel);
126
- });
 
 
 
 
 
127
  })();
128
  </script>
129
  {% endblock %}
 
1
  {% extends "base.html" %}
2
  {% block content %}
3
 
4
+ <!-- Background tiles (optional images) -->
5
  <div class="bg-gallery">
6
+ <div class="bg-tile" style="--bg:url('{{ url_for('static', filename='img/11.png') }}');"></div>
7
+ <div class="bg-tile" style="--bg:url('{{ url_for('static', filename='img/22.jpg') }}');"></div>
 
 
 
 
8
  </div>
9
 
10
  <h2>Find and rank materials</h2>
11
 
12
  <form action="{{ url_for('recommend') }}" method="post" class="grid" id="mmForm">
13
  <label>Application
14
+ <input name="environment" placeholder="seawater / sour service / high-T oxidation">
 
15
  </label>
16
  <label>Temperature
17
+ <input name="temperature" placeholder="e.g., 20–25 °C">
18
  </label>
19
  <label>Min UTS (MPa)
20
+ <input name="min_uts" type="number" min="0" step="10" placeholder="e.g., 700">
21
  </label>
22
  <label>Max density (g/cm³)
23
+ <input name="max_density" type="number" min="0" step="0.1" placeholder="e.g., 8.2">
24
  </label>
25
  <label>Budget
26
+ <input name="budget" placeholder="open / low / medium / high">
27
  </label>
28
  <label>Process
29
+ <input name="process" placeholder="wrought / casting / AM / any">
30
  </label>
31
 
32
+ <fieldset class="weights" id="weightsBox">
33
+ <legend>Priorities (each 0–100)</legend>
 
34
 
35
+ <div class="weight-row">
36
  <label>Performance</label>
37
+ <select name="sel_perf" class="pref" data-target="w_perf">
38
+ <option value="vh" selected>Very high</option>
39
+ <option value="h">High</option>
40
+ <option value="m">Medium</option>
41
+ <option value="l">Low</option>
42
+ <option value="vl">Very low</option>
43
  </select>
44
+ <input type="hidden" name="w_perf" value="100">
45
  </div>
46
 
47
+ <div class="weight-row">
48
  <label>Stability</label>
49
+ <select name="sel_stab" class="pref" data-target="w_stab">
50
+ <option value="vh" selected>Very high</option>
51
+ <option value="h">High</option>
52
+ <option value="m">Medium</option>
53
+ <option value="l">Low</option>
54
+ <option value="vl">Very low</option>
55
  </select>
56
  <input type="hidden" name="w_stab" value="100">
57
  </div>
58
 
59
+ <div class="weight-row">
60
+ <label>Cost importance</label>
61
+ <select name="sel_cost" class="pref" data-target="w_cost">
62
+ <option value="ni" selected>Not important</option>
63
+ <option value="h">High</option>
64
+ <option value="m">Medium</option>
65
+ <option value="l">Low</option>
66
+ <option value="vl">Very low</option>
67
  </select>
68
+ <input type="hidden" name="w_cost" value="0">
69
  </div>
70
 
71
+ <div class="weight-row">
72
  <label>Availability</label>
73
+ <select name="sel_avail" class="pref" data-target="w_avail">
74
+ <option value="vh">Very high</option>
75
+ <option value="h" selected>High</option>
76
+ <option value="m">Medium</option>
77
+ <option value="l">Low</option>
78
+ <option value="vl">Very low</option>
79
  </select>
80
  <input type="hidden" name="w_avail" value="75">
81
  </div>
 
86
  </label>
87
 
88
  <div class="actions">
89
+ <button class="btn" type="submit">Get ranked shortlist</button>
90
  </div>
91
  </form>
92
 
 
102
 
103
  <script>
104
  (function () {
105
+ const box = document.getElementById('weightsBox');
106
+ const prefs = Array.from(box.querySelectorAll('select.pref'));
 
107
 
108
+ // Map dropdown -> numeric weight (0..100)
109
+ const map = { vh:100, h:75, m:50, l:25, vl:10, ni:0 };
 
 
 
 
 
110
 
111
+ function apply(){
112
+ prefs.forEach(sel => {
113
+ const tgt = sel.dataset.target;
114
+ const inp = box.querySelector(`input[name="${tgt}"]`);
115
+ inp.value = map[sel.value] ?? 0;
116
+ });
117
+ }
118
+ prefs.forEach(s => s.addEventListener('change', apply));
119
+ apply(); // seed
120
  })();
121
  </script>
122
  {% endblock %}