teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問innerHTMLによって値は置き換わるが、表示が上書きされず列挙される

編集履歴

質問編集履歴

8

誤字の修正

2021/10/27 10:59

投稿

Espeon-No.196
Espeon-No.196

スコア3

test CHANGED
File without changes
test CHANGED
@@ -25,10 +25,6 @@
25
25
  └ index.html
26
26
 
27
27
  ```
28
-
29
-
30
-
31
- index.html
32
28
 
33
29
  ```html
34
30
 

7

タグの変更

2021/10/27 10:59

投稿

Espeon-No.196
Espeon-No.196

スコア3

test CHANGED
File without changes
test CHANGED
File without changes

6

問題点の抽出

2021/10/27 10:57

投稿

Espeon-No.196
Espeon-No.196

スコア3

test CHANGED
@@ -1 +1 @@
1
- pythonからの返り値(double)をwebページ上にリアルタイム表示させたい
1
+ innerHTMLによって値は置き換わるが、表示が上書きされず列挙される
test CHANGED
@@ -1,10 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- webカメラから取得した映像を深層学習によってリアルタイム識別するアプリを作成しているのですが、表題の通り表示のところで詰まっております。
4
-
5
- 以下のようにプログラムを書きましたが、
3
+ 表題のとおりですが、表示する場所を1箇所のみに固定したいです。
6
-
7
- イメージとしては↓こちらの方の「確信度」のように表示をさせたいです。https://engineers.safie.link/entry/2020/06/24
8
4
 
9
5
 
10
6
 
@@ -17,8 +13,6 @@
17
13
  flask_app
18
14
 
19
15
  ├ app.py
20
-
21
- ├ detection.py　---　映像1フレームを取得し、関数get_predで予測度を返す
22
16
 
23
17
  ├ static
24
18
 
@@ -34,101 +28,29 @@
34
28
 
35
29
 
36
30
 
37
- app.py
38
-
39
- ```python
40
-
41
- # -*- coding: utf-8 -*-
42
-
43
- from flask import Flask, stream_with_context, request, Response, flash
44
-
45
- from flask import render_template, redirect
46
-
47
- from detection import get_pred
48
-
49
- import cv2
50
-
51
-
52
-
53
- app = Flask(__name__)
54
-
55
-
56
-
57
- @app.route('/')
58
-
59
- def index():
60
-
61
- return redirect('/stream')
62
-
63
-
64
-
65
- def stream_template(template_name, **context):
66
-
67
- app.update_template_context(context)
68
-
69
- t = app.jinja_env.get_template(template_name)
70
-
71
- rv = t.stream(context)
72
-
73
- rv.disable_buffering()
74
-
75
- return rv
76
-
77
-
78
-
79
- def generate():
80
-
81
- while True:　　#　映像のためループさせる
82
-
83
- pred = get_pred()
84
-
85
- yield str(pred)
86
-
87
-
88
-
89
- @app.route('/stream')
90
-
91
- def stream_feed():
92
-
93
- rows=generate()
94
-
95
- return Response(stream_with_context(stream_template('index.html',rows=rows)))
96
-
97
-
98
-
99
- if __name__ == '__main__':
100
-
101
- app.run()
102
-
103
- ```
104
-
105
-
106
-
107
- detection.py
108
-
109
- ```python
110
-
111
- def get_pred():
112
-
113
- # 1フレーム読み込み、学習済みモデルによって予測する
114
-
115
- return prediction
116
-
117
- ```
118
-
119
-
120
-
121
31
  index.html
122
32
 
123
33
  ```html
124
34
 
125
- {% for item in rows %}
35
+ <div id = "test"></div>
126
36
 
127
- <div>{{item}}</div>
37
+ {% for item in rows %}
128
38
 
39
+ <script>
40
+
41
+ var x = {{item|tojson}};
42
+
43
+ var elem = document.getElementById("test");
44
+
45
+ elem.innerHTML=document.write(x)
46
+
47
+ </script>
48
+
129
- {% endfor %}
49
+ {% endfor %}
130
50
 
131
51
  ```
52
+
53
+ app.pyから配列rowsを値渡しし、xの値は変わりますが以下の通り値が下に列挙され続けます。
132
54
 
133
55
 
134
56
 
@@ -154,8 +76,6 @@
154
76
 
155
77
  ```
156
78
 
157
- と無限に表示されてしまいます。表示箇所を1箇所に固定し、値を書き換えたいです。
158
-
159
79
 
160
80
 
161
81
  よろしくお願いいたします。

5

プログラムの修正

2021/10/27 10:56

投稿

Espeon-No.196
Espeon-No.196

スコア3

test CHANGED
File without changes
test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
  pred = get_pred()
84
84
 
85
- yield pred
85
+ yield str(pred)
86
86
 
87
87
 
88
88
 
@@ -90,7 +90,7 @@
90
90
 
91
91
  def stream_feed():
92
92
 
93
- rows=str(generate())
93
+ rows=generate()
94
94
 
95
95
  return Response(stream_with_context(stream_template('index.html',rows=rows)))
96
96
 
@@ -138,25 +138,23 @@
138
138
 
139
139
  ```
140
140
 
141
- 0
141
+ 0.9957042746245861
142
142
 
143
- .
143
+ 0.9996902529674117
144
144
 
145
- 9
145
+ 0.7194661200046539
146
146
 
147
- 8
147
+ 0.9997030695376452
148
148
 
149
- 4
149
+ 0.9999996055534837
150
150
 
151
- 7
151
+ 0.9999996172154226
152
-
153
- 6
154
152
 
155
153
 
156
154
 
157
155
  ```
158
156
 
159
- と表示されページをリロードしなければ値が書き換わらない
157
+ と無限に表示されてしまいます。表示箇所を1箇所に固定し、値を書き換えたいです。
160
158
 
161
159
 
162
160
 

4

プログラムの修正

2021/10/27 08:35

投稿

Espeon-No.196
Espeon-No.196

スコア3

test CHANGED
File without changes
test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
  pred = get_pred()
84
84
 
85
- yield str(pred)
85
+ yield pred
86
86
 
87
87
 
88
88
 
@@ -90,9 +90,9 @@
90
90
 
91
91
  def stream_feed():
92
92
 
93
- pred=generate()
93
+ rows=str(generate())
94
94
 
95
- return Response(stream_with_context(stream_template('index.html',answer=pred)))
95
+ return Response(stream_with_context(stream_template('index.html',rows=rows)))
96
96
 
97
97
 
98
98
 
@@ -122,7 +122,11 @@
122
122
 
123
123
  ```html
124
124
 
125
+ {% for item in rows %}
126
+
125
- <div>{{answer}}</div>
127
+ <div>{{item}}</div>
128
+
129
+ {% endfor %}
126
130
 
127
131
  ```
128
132
 
@@ -134,11 +138,25 @@
134
138
 
135
139
  ```
136
140
 
137
- <generator object generate at 0x7f955fb354d0>
141
+ 0
142
+
143
+ .
144
+
145
+ 9
146
+
147
+ 8
148
+
149
+ 4
150
+
151
+ 7
152
+
153
+ 6
154
+
155
+
138
156
 
139
157
  ```
140
158
 
141
- と表示され値が書き換わらない
159
+ と表示されページをリロードしなければ値が書き換わらない
142
160
 
143
161
 
144
162
 

3

エラーの修正

2021/10/27 07:07

投稿

Espeon-No.196
Espeon-No.196

スコア3

test CHANGED
File without changes
test CHANGED
@@ -90,9 +90,9 @@
90
90
 
91
91
  def stream_feed():
92
92
 
93
- row=generate()
93
+ pred=generate()
94
94
 
95
- return Response(stream_with_context(stream_template('index.html',answer=row)))
95
+ return Response(stream_with_context(stream_template('index.html',answer=pred)))
96
96
 
97
97
 
98
98
 
@@ -134,11 +134,11 @@
134
134
 
135
135
  ```
136
136
 
137
- Not Found
138
-
139
- The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.
137
+ <generator object generate at 0x7f955fb354d0>
140
138
 
141
139
  ```
140
+
141
+ と表示され値が書き換わらない
142
142
 
143
143
 
144
144
 

2

誤字

2021/10/27 05:39

投稿

Espeon-No.196
Espeon-No.196

スコア3

test CHANGED
File without changes
test CHANGED
@@ -86,7 +86,7 @@
86
86
 
87
87
 
88
88
 
89
- @app.route('/strean')
89
+ @app.route('/stream')
90
90
 
91
91
  def stream_feed():
92
92
 

1

プログラムの修正

2021/10/27 05:17

投稿

Espeon-No.196
Espeon-No.196

スコア3

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- webカメラから取得した映像を深層学習によってリアルタイム識別するアプリを開発しているのですが、表題の通り表示のところで詰まっております。
3
+ webカメラから取得した映像を深層学習によってリアルタイム識別するアプリを作成しているのですが、表題の通り表示のところで詰まっております。
4
4
 
5
5
  以下のようにプログラムを書きましたが、
6
6
 
@@ -34,7 +34,9 @@
34
34
 
35
35
 
36
36
 
37
+ app.py
38
+
37
- ```python:app.py
39
+ ```python
38
40
 
39
41
  # -*- coding: utf-8 -*-
40
42
 
@@ -82,10 +84,6 @@
82
84
 
83
85
  yield str(pred)
84
86
 
85
- if cv2.waitKey(1) == 27:
86
-
87
- break
88
-
89
87
 
90
88
 
91
89
  @app.route('/strean')
@@ -106,7 +104,9 @@
106
104
 
107
105
 
108
106
 
109
- ```python:detection.py
107
+ detection.py
108
+
109
+ ```python
110
110
 
111
111
  def get_pred():
112
112
 
@@ -118,7 +118,9 @@
118
118
 
119
119
 
120
120
 
121
- ```html:index.html
121
+ index.html
122
+
123
+ ```html
122
124
 
123
125
  <div>{{answer}}</div>
124
126