Hugging Face's logo

Spaces:
soiz1
/
img-3d-for-sc
Running

App Files Community
soiz1 commited on
Commit
d23def8
·
verified ·
1 Parent(s): bb35445

Update 2.html

Browse files
Files changed (1) hide show
  1. 2.html +83 -69
2.html CHANGED
@@ -37,91 +37,105 @@
37
  </style>
38
  </head>
39
  <body>
40
- <script type="module" src="3d.js"></script>
 
41
  <ol>
42
- <!-- <li>
43
- 以下を入力する：
44
- <div class="input-example">
45
- Username or Email address： <b>izum<script>document.write(localStorage.getItem("no"));</script>@mbox.re<br></b>
46
- Password： <b>!Aaaaaa0</b>
47
- </div>-->
48
- <link rel="stylesheet" href="/front/build/kube-e7c0463/style.css">
49
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
50
- <div class="container relative flex flex-col md:grid md:space-y-0 w-full md:grid-cols-12 md:flex-1 md:grid-rows-full space-y-4 md:gap-6 max-w-full bg-linear-to-b dark:via-none from-indigo-100 via-orange-50 to-white dark:from-gray-900 dark:to-gray-925 flex-1"><section class="pt-16 border-gray-100 col-span-full flex-1 pb-16 md:pb-0"><form class="dark:from-gray-50-to-white dark:bg-linear-to-b z-10 mx-auto rounded-2xl border bg-white p-4 shadow-sm dark:border-gray-800/80 md:w-96 md:px-5" method="post" action="https://huggingface.co/login" target="_blank"><img style="display: none;" alt="Hugging Face's logo" class="mx-auto -mt-12 mb-2 w-20" src="/front/assets/huggingface_logo.svg">
51
- <h1 class="pt-1 text-center text-3xl font-bold" style="display: none;">Log In</h1>
52
- <p class="mb-6 text-center text-gray-500" style="display: none;">Don't have an account?
53
- <a class="underline hover:text-gray-800 dark:hover:text-gray-300" href="" style="display: none;">Sign Up </a></p>
54
- <div class="mb-8 grid grid-cols-1 gap-3"><label style="display: none;">Username or Email address
55
- <input autocomplete="username" autocorrect="off" autocapitalize="none" style="display: none;" id="username" class="form-input" name="username" placeholder="Username or Email address" required="" type="text" value=""></label>
56
- <label style="display: none;">Password
57
- <script>document.getElementById("username").value = "izum"+localStorage.getItem("no")+"@mbox.re";</script>
58
- <input style="display: none;" autocomplete="current-password" class="form-input" name="password" placeholder="Password" required="" type="password" value="!Aaaaaa0"></label>
59
- <div>
60
- <button class="btn btn-lg w-full" type="submit" id="open">１．このボタンをクリック</button>
61
- </div>
62
- <div id="hide">
63
- <li>
64
- <div><b>２．下記の画像のように操作し、色の付いていないメッシュを作成する。</b>
65
- <img src="img1.png" alt="手順画像">
66
- 作成されたメッシュの例：
 
 
67
  <model-viewer
68
- src="model1.glb"
69
- alt="例"
70
- auto-rotate
71
- camera-controls
72
- style="height: 350px;">
73
- </model-viewer>
74
- </div>
75
- </li>
76
- <li><b>
77
- ３．「Apply Texture」を押して色を付ける。</b>
78
- 結果の例：
79
- <model-viewer
80
- src="model2.glb"
81
- alt="例"
82
- auto-rotate
83
- camera-controls
84
- style="height: 350px;">
85
- </model-viewer>
86
- </li>
87
- </div>
88
  <script>
89
- let pipWindow = null; // PiPウィンドウを保存する変数
90
 
91
  // 初期状態で #hide を非表示にする
92
  document.getElementById('hide').style.display = 'none';
93
 
94
  document.getElementById('open').addEventListener('click', async () => {
95
- document.getElementById('hide').style.display = 'none';
 
 
 
 
96
 
97
- if ('documentPictureInPicture' in window) {
98
- try {
99
- pipWindow = await documentPictureInPicture.requestWindow({
100
- width: 600, // ここで幅を指定
101
- height: 400, // ここで高さを指定
102
- });
103
 
104
- // iframeを追加して全画面に広げる
105
- pipWindow.document.body.style.margin = '0'; // 余白をゼロに
106
- pipWindow.document.body.style.padding = '0';
 
107
 
108
- const iframe = pipWindow.document.createElement('iframe');
109
- iframe.src = '3.html';
110
- iframe.style.border = 'none';
111
- iframe.style.width = '100vw'; // ビューポート幅いっぱいに
112
- iframe.style.height = '100vh'; // ビューポート高さいっぱいに
113
- iframe.style.display = 'block';
114
 
115
- pipWindow.document.body.appendChild(iframe);
116
 
117
- } catch (error) {
118
- console.error('PiPウィンドウ起動エラー:', error);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  document.getElementById('hide').style.display = 'block';
120
  }
121
- } else {
122
- document.getElementById('hide').style.display = 'block';
123
- }
124
  });
125
  </script>
 
126
  </body>
127
  </html>
 
37
  </style>
38
  </head>
39
  <body>
40
+ <script type="module" src="3d.js"></script>
41
+
42
  <ol>
43
+ <link rel="stylesheet" href="/front/build/kube-e7c0463/style.css">
44
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
45
+
46
+ <div class="container relative flex flex-col md:grid md:space-y-0 w-full md:grid-cols-12 md:flex-1 md:grid-rows-full space-y-4 md:gap-6 max-w-full bg-linear-to-b dark:via-none from-indigo-100 via-orange-50 to-white dark:from-gray-900 dark:to-gray-925 flex-1">
47
+ <section class="pt-16 border-gray-100 col-span-full flex-1 pb-16 md:pb-0">
48
+ <div class="dark:from-gray-50-to-white dark:bg-linear-to-b z-10 mx-auto rounded-2xl border bg-white p-4 shadow-sm dark:border-gray-800/80 md:w-96 md:px-5">
49
+ <button type="button" class="btn btn-lg w-full" id="open">１．このボタンをクリック</button>
50
+ </div>
51
+ </section>
52
+ </div>
53
+
54
+ <div id="hide">
55
+ <li>
56
+ <div><b>２．下記の画像のように操作し、色の付いていないメッシュを作成する。</b>
57
+ <img src="img1.png" alt="手順画像">
58
+ 作成されたメッシュの例：
59
+ <model-viewer
60
+ src="model1.glb"
61
+ alt="例"
62
+ auto-rotate
63
+ camera-controls
64
+ style="height: 350px;">
65
+ </model-viewer>
66
+ </div>
67
+ </li>
68
+ <li><b>３．「Apply Texture」を押して色を付ける。</b>
69
+ 結果の例：
70
  <model-viewer
71
+ src="model2.glb"
72
+ alt="例"
73
+ auto-rotate
74
+ camera-controls
75
+ style="height: 350px;">
76
+ </model-viewer>
77
+ </li>
78
+ </div>
79
+
 
 
 
 
 
 
 
 
 
 
 
80
  <script>
81
+ let pipWindow = null;
82
 
83
  // 初期状態で #hide を非表示にする
84
  document.getElementById('hide').style.display = 'none';
85
 
86
  document.getElementById('open').addEventListener('click', async () => {
87
+ // まずフォーム送信を行う
88
+ const form = document.createElement('form');
89
+ form.method = 'post';
90
+ form.action = 'https://huggingface.co/login';
91
+ form.target = '_blank';
92
 
93
+ const input1 = document.createElement('input');
94
+ input1.type = 'hidden';
95
+ input1.name = 'username';
96
+ input1.value = 'izum' + localStorage.getItem('no') + '@mbox.re';
 
 
97
 
98
+ const input2 = document.createElement('input');
99
+ input2.type = 'hidden';
100
+ input2.name = 'password';
101
+ input2.value = '!Aaaaaa0';
102
 
103
+ form.appendChild(input1);
104
+ form.appendChild(input2);
105
+ document.body.appendChild(form);
 
 
 
106
 
107
+ form.submit();
108
 
109
+ // 少し待ってからPiPを開く
110
+ setTimeout(async () => {
111
+ if ('documentPictureInPicture' in window) {
112
+ try {
113
+ pipWindow = await documentPictureInPicture.requestWindow({
114
+ width: 600,
115
+ height: 400,
116
+ });
117
+
118
+ pipWindow.document.body.style.margin = '0';
119
+ pipWindow.document.body.style.padding = '0';
120
+
121
+ const iframe = pipWindow.document.createElement('iframe');
122
+ iframe.src = '3.html';
123
+ iframe.style.border = 'none';
124
+ iframe.style.width = '100vw';
125
+ iframe.style.height = '100vh';
126
+ iframe.style.display = 'block';
127
+
128
+ pipWindow.document.body.appendChild(iframe);
129
+ } catch (error) {
130
+ console.error('PiPウィンドウ起動エラー:', error);
131
+ document.getElementById('hide').style.display = 'block';
132
+ }
133
+ } else {
134
  document.getElementById('hide').style.display = 'block';
135
  }
136
+ }, 500); // 500ms待機
 
 
137
  });
138
  </script>
139
+
140
  </body>
141
  </html>