kuri-pl commited on
Commit
c00d9ef
1 Parent(s): a60c76b

Add Unity WebGL build files

Browse files
TemplateData/favicon.ico ADDED
TemplateData/fullscreen-button.png ADDED
TemplateData/style.css ADDED
@@ -0,0 +1,105 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ html {
2
+ box-sizing: border-box;
3
+ }
4
+ *, *:before, *:after {
5
+ box-sizing: inherit;
6
+ }
7
+ html, body {
8
+ height: 100%;
9
+ }
10
+ canvas {
11
+ display: block;
12
+ }
13
+ body {
14
+ margin: 0;
15
+ }
16
+ #unity-container {
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+ #unity-canvas {
21
+ width: 100%;
22
+ height: 100%;
23
+ background: #231F20;
24
+ }
25
+ #loading-cover {
26
+ position: absolute;
27
+ top: 0;
28
+ left: 0;
29
+ width: 100%;
30
+ height: 100%;
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ }
35
+ #unity-loading-bar {
36
+ flex: 1 1 auto;
37
+ display: flex;
38
+ flex-direction: column;
39
+ justify-content: center;
40
+ align-items: center;
41
+ }
42
+ #unity-logo {
43
+ text-align: center;
44
+ }
45
+ #unity-logo img {
46
+ max-width: 80%;
47
+ }
48
+ #unity-progress-bar-empty {
49
+ width: 80%;
50
+ height: 24px;
51
+ margin: 10px 20px 20px 10px;
52
+ text-align: left;
53
+ border: 1px solid white;
54
+ padding: 2px;
55
+ }
56
+ #unity-progress-bar-full {
57
+ width: 0%;
58
+ height: 100%;
59
+ background: #ffd21e;
60
+ }
61
+ .light #unity-progress-bar-empty {
62
+ border-color: black;
63
+ }
64
+ .light #unity-progress-bar-full {
65
+ background: black;
66
+ }
67
+
68
+ #unity-fullscreen-button {
69
+ position: absolute;
70
+ right: 10px;
71
+ bottom: 10px;
72
+ width: 38px;
73
+ height: 38px;
74
+ background: url('fullscreen-button.png') no-repeat center;
75
+ background-size: contain;
76
+ }
77
+
78
+ .spinner,
79
+ .spinner:after {
80
+ border-radius: 50%;
81
+ width: 5em;
82
+ height: 5em;
83
+ }
84
+ .spinner {
85
+ margin: 10px;
86
+ font-size: 10px;
87
+ position: relative;
88
+ text-indent: -9999em;
89
+ border-top: 1.1em solid rgba(255, 255, 255, 0.2);
90
+ border-right: 1.1em solid rgba(255, 255, 255, 0.2);
91
+ border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
92
+ border-left: 1.1em solid #ffffff;
93
+ transform: translateZ(0);
94
+ animation: spinner-spin 1.1s infinite linear;
95
+ }
96
+ @keyframes spinner-spin {
97
+ 0% {
98
+ transform: rotate(0deg);
99
+ }
100
+ 100% {
101
+ transform: rotate(360deg);
102
+ }
103
+ }
104
+
105
+
index.html CHANGED
@@ -1,19 +1,92 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
1
  <!DOCTYPE html>
2
+ <html lang="en-us">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
7
+ <title>Pj - 2D-to-3D</title>
8
+ <link rel="shortcut icon" href="TemplateData/favicon.ico">
9
+ <link rel="stylesheet" href="TemplateData/style.css">
10
+ </head>
11
+ <body class="dark">
12
+ <div id="unity-container" class="unity-desktop">
13
+ <canvas id="unity-canvas"></canvas>
14
+ </div>
15
+ <div id="loading-cover" style="display:none;">
16
+ <div id="unity-loading-bar">
17
+ <div id="unity-logo"><img src="logo.png"></div>
18
+ <div id="unity-progress-bar-empty" style="display: none;">
19
+ <div id="unity-progress-bar-full"></div>
20
+ </div>
21
+ <div class="spinner"></div>
22
+ </div>
23
+ </div>
24
+ <div id="unity-fullscreen-button" style="display: none;"></div>
25
+ <script>
26
+ const hideFullScreenButton = "";
27
+ const buildUrl = "Build";
28
+ const loaderUrl = buildUrl + "/Insta-3D.loader.js";
29
+ const config = {
30
+ dataUrl: buildUrl + "/Insta-3D.data",
31
+ frameworkUrl: buildUrl + "/Insta-3D.framework.js",
32
+ codeUrl: buildUrl + "/Insta-3D.wasm",
33
+ streamingAssetsUrl: "StreamingAssets",
34
+ companyName: "ilumine AI",
35
+ productName: "Pj - 2D-to-3D",
36
+ productVersion: "0.1.12",
37
+ };
38
+
39
+ const container = document.querySelector("#unity-container");
40
+ const canvas = document.querySelector("#unity-canvas");
41
+ const loadingCover = document.querySelector("#loading-cover");
42
+ const progressBarEmpty = document.querySelector("#unity-progress-bar-empty");
43
+ const progressBarFull = document.querySelector("#unity-progress-bar-full");
44
+ const fullscreenButton = document.querySelector("#unity-fullscreen-button");
45
+ const spinner = document.querySelector('.spinner');
46
+
47
+ const canFullscreen = (function() {
48
+ for (const key of [
49
+ 'exitFullscreen',
50
+ 'webkitExitFullscreen',
51
+ 'webkitCancelFullScreen',
52
+ 'mozCancelFullScreen',
53
+ 'msExitFullscreen',
54
+ ]) {
55
+ if (key in document) {
56
+ return true;
57
+ }
58
+ }
59
+ return false;
60
+ }());
61
+
62
+ if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
63
+ container.className = "unity-mobile";
64
+ config.devicePixelRatio = 1;
65
+ }
66
+ loadingCover.style.display = "";
67
+
68
+ const script = document.createElement("script");
69
+ script.src = loaderUrl;
70
+ script.onload = () => {
71
+ createUnityInstance(canvas, config, (progress) => {
72
+ spinner.style.display = "none";
73
+ progressBarEmpty.style.display = "";
74
+ progressBarFull.style.width = `${100 * progress}%`;
75
+ }).then((unityInstance) => {
76
+ loadingCover.style.display = "none";
77
+ if (canFullscreen) {
78
+ if (!hideFullScreenButton) {
79
+ fullscreenButton.style.display = "";
80
+ }
81
+ fullscreenButton.onclick = () => {
82
+ unityInstance.SetFullscreen(1);
83
+ };
84
+ }
85
+ }).catch((message) => {
86
+ alert(message);
87
+ });
88
+ };
89
+ document.body.appendChild(script);
90
+ </script>
91
+ </body>
92
  </html>