Hugging Face's logo

Spaces:
cm107
/
excav_demo-light
Running

App Files Community
1
cm107 commited on
Commit
1009dc4
·
1 Parent(s): d8734b7

Divided page into unity-container (left) and infoBox (right).

Browse files

When the infoBox overflows, I made it so that you can scroll.
I also did some adjustments to the logo, loading bar, and fullscreen button so that changing the size of the window doesn't result in them jutting out of the unity-container.

Files changed (2) hide show
  1. index.html +135 -130
  2. main.css +41 -4
index.html CHANGED
@@ -12,140 +12,145 @@
12
  </head>
13
 
14
  <body class="dark">
15
- <div id="unity-container" class="unity-desktop">
16
- <canvas id="unity-canvas"></canvas>
17
- </div>
18
- <div id="loading-cover" style="display:none;">
19
- <div id="unity-loading-bar">
20
- <div id="unity-logo"><img src="logo.png"></div>
21
- <div id="unity-progress-bar-empty" style="display: none;">
22
- <div id="unity-progress-bar-full"></div>
 
 
 
23
  </div>
24
- <div class="spinner"></div>
25
- </div>
26
- </div>
27
- <div id="unity-fullscreen-button" style="display: none;"></div>
28
- <script type="text/javascript" src="gameLoad.js"></script>
29
- <div id="infoBox">
30
- <h1>Controls</h1>
31
- <div id="controls">
32
- <table>
33
- <th>Binding</th>
34
- <th>Description</th>
35
- <tr>
36
- <td>Right Mouse Click (Drag)</td>
37
- <td>
38
- Rotates the camera in the direction of the mouse drag.
39
- </td>
40
- </tr>
41
- <tr>
42
- <td>Left Mouse Click</td>
43
- <td>
44
- Sets the goal point to the location on the terrain where you clicked.
45
- </td>
46
- </tr>
47
- <tr>
48
- <td>W</td>
49
- <td>
50
- Move forward.
51
- </td>
52
- </tr>
53
- <tr>
54
- <td>S</td>
55
- <td>
56
- Move backward.
57
- </td>
58
- </tr>
59
- <tr>
60
- <td>A</td>
61
- <td>
62
- Move left.
63
- </td>
64
- </tr>
65
- <tr>
66
- <td>D</td>
67
- <td>
68
- Move right.
69
- </td>
70
- </tr>
71
- <tr>
72
- <td>E</td>
73
- <td>Move up.</td>
74
- </tr>
75
- <tr>
76
- <td>Q</td>
77
- <td>Move down.</td>
78
- </tr>
79
- <tr>
80
- <td>R</td>
81
- <td>
82
- Restart the episode.
83
- Note that the terrain does not change even if you are in random mode.
84
- Deformations to the terrain are preserved as well.
85
- </td>
86
- </tr>
87
- <tr>
88
- <td>1</td>
89
- <td>
90
- <div class="cellHeader">Terrain Mode: RANDOM</div>
91
- Restart with a random terrain shape (no perlin noise).
92
- </td>
93
- </tr>
94
- <tr>
95
- <td>2</td>
96
- <td>
97
- <div class="cellHeader">Terrain Mode: RANDOM_NOISE</div>
98
- Restart with a random terrain shape (with perlin noise).
99
- </td>
100
- </tr>
101
- <tr>
102
- <td>3</td>
103
- <td>
104
- <div class="cellHeader">Terrain Mode: GAUSSIAN_SLOPE</div>
105
- Restart with a gaussian slope shaped terrain.
106
- </td>
107
- </tr>
108
- <tr>
109
- <td>4</td>
110
- <td>
111
- <div class="cellHeader">Terrain Mode: POINTY_GAUSSIAN_SLOPE</div>
112
- Restart with a <i>pointy</i> gaussian slope shaped terrain.
113
- </td>
114
- </tr>
115
- <tr>
116
- <td>5</td>
117
- <td>
118
- <div class="cellHeader">Terrain Mode: TRAPEZOIDAL_HILL</div>
119
- Restart with a trapezoidal hill shaped terrain.
120
- </td>
121
- </tr>
122
- </table>
123
  </div>
124
- <h1>Disclaimer</h1>
125
- <div id="disclaimerBody">
126
- <p>
127
- <a target=”_blank” href="https://docs.unity3d.com/Packages/[email protected]/manual/index.html#inference">
128
- Unfortunately, MLAgents doesn't support GPU inference for WebGL builds.
129
- </a><br>
130
- The excavator model was originally trained with a larger neural network and yielded good results, but the model
131
- was too large to run smoothly on the CPU.
132
- The current model was trained with a smaller model. Although it can run more smoothly on the CPU, the
133
- performance isn't as good as that of the larger model.
134
- </p>
135
- <p>
136
- If you would like to try out the larger model as well, refer to <a
137
- href="https://huggingface.co/spaces/cm107/excav_demo">excav_demo</a>.
138
- When using the larger model, it is recommended that you download the build corresponding to your specific target
139
- platform.
140
- </p>
141
- <p>
142
- For more information about WebGL performance considerations, refer to
143
- <a target=”_blank” href="https://docs.unity3d.com/Manual/webgl-performance.html">
144
- the unity documentation
145
- </a>.
146
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
147
  </div>
148
  </div>
 
149
  </body>
150
 
151
  </html>
 
12
  </head>
13
 
14
  <body class="dark">
15
+ <div id="overall-container">
16
+ <div id="unity-container" class="unity-desktop">
17
+ <canvas id="unity-canvas"></canvas>
18
+ <div id="loading-cover" style="display:none;">
19
+ <div id="unity-loading-bar">
20
+ <div id="unity-logo"><img src="logo.png"></div>
21
+ <div id="unity-progress-bar-empty" style="display: none;">
22
+ <div id="unity-progress-bar-full"></div>
23
+ </div>
24
+ <div class="spinner"></div>
25
+ </div>
26
  </div>
27
+ <div id="unity-fullscreen-button" style="display: none;"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  </div>
29
+ <div id="infoBox">
30
+ <h1>Controls</h1>
31
+ <div id="controls">
32
+ <table>
33
+ <th>Binding</th>
34
+ <th>Description</th>
35
+ <tr>
36
+ <td>Right Mouse Click (Drag)</td>
37
+ <td>
38
+ Rotates the camera in the direction of the mouse drag.
39
+ </td>
40
+ </tr>
41
+ <tr>
42
+ <td>Left Mouse Click</td>
43
+ <td>
44
+ Sets the goal point to the location on the terrain where you clicked.
45
+ </td>
46
+ </tr>
47
+ <tr>
48
+ <td>W</td>
49
+ <td>
50
+ Move forward.
51
+ </td>
52
+ </tr>
53
+ <tr>
54
+ <td>S</td>
55
+ <td>
56
+ Move backward.
57
+ </td>
58
+ </tr>
59
+ <tr>
60
+ <td>A</td>
61
+ <td>
62
+ Move left.
63
+ </td>
64
+ </tr>
65
+ <tr>
66
+ <td>D</td>
67
+ <td>
68
+ Move right.
69
+ </td>
70
+ </tr>
71
+ <tr>
72
+ <td>E</td>
73
+ <td>Move up.</td>
74
+ </tr>
75
+ <tr>
76
+ <td>Q</td>
77
+ <td>Move down.</td>
78
+ </tr>
79
+ <tr>
80
+ <td>R</td>
81
+ <td>
82
+ Restart the episode.
83
+ Note that the terrain does not change even if you are in random mode.
84
+ Deformations to the terrain are preserved as well.
85
+ </td>
86
+ </tr>
87
+ <tr>
88
+ <td>1</td>
89
+ <td>
90
+ <div class="cellHeader">Terrain Mode: RANDOM</div>
91
+ Restart with a random terrain shape (no perlin noise).
92
+ </td>
93
+ </tr>
94
+ <tr>
95
+ <td>2</td>
96
+ <td>
97
+ <div class="cellHeader">Terrain Mode: RANDOM_NOISE</div>
98
+ Restart with a random terrain shape (with perlin noise).
99
+ </td>
100
+ </tr>
101
+ <tr>
102
+ <td>3</td>
103
+ <td>
104
+ <div class="cellHeader">Terrain Mode: GAUSSIAN_SLOPE</div>
105
+ Restart with a gaussian slope shaped terrain.
106
+ </td>
107
+ </tr>
108
+ <tr>
109
+ <td>4</td>
110
+ <td>
111
+ <div class="cellHeader">Terrain Mode: POINTY_GAUSSIAN_SLOPE</div>
112
+ Restart with a <i>pointy</i> gaussian slope shaped terrain.
113
+ </td>
114
+ </tr>
115
+ <tr>
116
+ <td>5</td>
117
+ <td>
118
+ <div class="cellHeader">Terrain Mode: TRAPEZOIDAL_HILL</div>
119
+ Restart with a trapezoidal hill shaped terrain.
120
+ </td>
121
+ </tr>
122
+ </table>
123
+ </div>
124
+ <h1>Disclaimer</h1>
125
+ <div id="disclaimerBody">
126
+ <p>
127
+ <a target=”_blank”
128
+ href="https://docs.unity3d.com/Packages/[email protected]/manual/index.html#inference">
129
+ Unfortunately, MLAgents doesn't support GPU inference for WebGL builds.
130
+ </a><br>
131
+ The excavator model was originally trained with a larger neural network and yielded good results, but the
132
+ model
133
+ was too large to run smoothly on the CPU.
134
+ The current model was trained with a smaller model. Although it can run more smoothly on the CPU, the
135
+ performance isn't as good as that of the larger model.
136
+ </p>
137
+ <p>
138
+ If you would like to try out the larger model as well, refer to <a
139
+ href="https://huggingface.co/spaces/cm107/excav_demo">excav_demo</a>.
140
+ When using the larger model, it is recommended that you download the build corresponding to your specific
141
+ target
142
+ platform.
143
+ </p>
144
+ <p>
145
+ For more information about WebGL performance considerations, refer to
146
+ <a target=”_blank” href="https://docs.unity3d.com/Manual/webgl-performance.html">
147
+ the unity documentation
148
+ </a>.
149
+ </p>
150
+ </div>
151
  </div>
152
  </div>
153
+ <script type="text/javascript" src="gameLoad.js"></script>
154
  </body>
155
 
156
  </html>
main.css CHANGED
@@ -1,5 +1,9 @@
1
  #infoBox {
2
- /* border: 5px solid red; */
 
 
 
 
3
  width: 75%;
4
  margin-left: auto;
5
  margin-right: auto;
@@ -44,10 +48,43 @@ td {
44
  margin-left: 30px;
45
  }
46
 
 
 
 
 
47
  #unity-container {
48
- /* TODO */
49
- width: 66%;
50
- height: 66%;
 
 
51
  margin-left: auto;
52
  margin-right: auto;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  }
 
1
  #infoBox {
2
+ border: 5px solid darkblue;
3
+ flex: 30%;
4
+ flex-direction: row;
5
+ overflow: scroll;
6
+ max-height: 100vh;
7
  width: 75%;
8
  margin-left: auto;
9
  margin-right: auto;
 
48
  margin-left: 30px;
49
  }
50
 
51
+ #overall-container {
52
+ display: flex;
53
+ }
54
+
55
  #unity-container {
56
+ flex: 50%;
57
+ border: 5px solid green;
58
+ position: relative;
59
+ width: auto;
60
+ height: 100vh;
61
  margin-left: auto;
62
  margin-right: auto;
63
+ }
64
+
65
+ #unity-loading-bar {
66
+ /* border: 5px solid red; */
67
+ height: 100%;
68
+ }
69
+
70
+ #unity-logo {
71
+ /* border: 5px solid cyan; */
72
+ display: flex;
73
+ height: 90%;
74
+ width: auto;
75
+ }
76
+
77
+ #unity-logo img {
78
+ /* border: 5px solid brown; */
79
+ display: flex;
80
+ max-height: 100%;
81
+ width: auto;
82
+ margin-left: auto;
83
+ margin-right: auto;
84
+ }
85
+
86
+ #unity-progress-bar-empty {
87
+ /* border: 5px solid purple; */
88
+ height: 10%;
89
+ max-height: 30px;
90
  }