-
Notifications
You must be signed in to change notification settings - Fork 0
/
clothingRecommendation.html
78 lines (61 loc) · 2.93 KB
/
clothingRecommendation.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>What I do ain't make-believe</title>
<link rel="icon" type="image/png" href="/StoreOfTheFutureDemo/asset/favicon.png"/>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="timeline.css">
<script src="timeline.js"></script>
</head>
<div id="timeline" data-currentTime="5"></div>
<script src="https://threejs.org/build/three.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({ antialias: true, autoSize: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xffffff, 1);
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x000000 } );
const cube = new THREE.Mesh( geometry, material );
// wireframe
var geo = new THREE.EdgesGeometry( cube.geometry ); // or WireframeGeometry
var mat = new THREE.LineBasicMaterial( { color: 0xffffff } );
var wireframe = new THREE.LineSegments( geo, mat );
cube.add( wireframe );
scene.add( cube );
camera.position.z = 5;
const animate = function () {
requestAnimationFrame( animate );
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
<div style="position: absolute; bottom: 30vh; left: 50vw; transform: translate(-50%, 0%);">
<h2 class="text-center">Calculating...</h2>
</div>
<audio id="audioPlayer" class="noselect showMe" controls>
<source class="center" src="asset/voiceOver/AI_voice_4.mp3" type="audio/wav">
Your browser does not support the audio element.
</audio>
<a class="showMe" href="tryOut.html">
<button type="button" class="storeButton" >
Let's try out some clothing
</button>
</a>
<div id="sideTextContainer">
<p>
In this phase, the AI is recommending you pieces of clothing which matches your desired context and labels. The clothing that is recommended can vary a lot and the suggestions can help someone to consider new clothing that might be outside of your comfort zone.
<p>
</p>
Aim :
Helping to distance people more from their personal bubble, by offering a wide variety of recommendations that suit the label selection of the participant. In the end there are many ways to look serious, cheerful or happy. The Cube will help them broaden their view.
</p>
</div>
</body>
</html>