File size: 19,578 Bytes
1a2052a
 
 
 
 
 
 
 
 
 
6cde696
 
1a2052a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
381512b
 
1a2052a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ae1815c
 
 
 
 
1a2052a
 
 
 
 
 
 
 
 
 
 
 
64d6f0a
1a2052a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d5099b9
1a2052a
 
 
 
 
 
 
 
 
 
 
 
 
ae1815c
1a2052a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f9b03e7
 
1a2052a
 
 
f9b03e7
1a2052a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e1ae3d0
 
 
 
 
1a2052a
 
 
 
 
 
 
 
 
 
 
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
import gradio as gr
from PIL import Image
import numpy as np

#載入聊天機器人模型
from transformers import AutoTokenizer, AutoModelForCausalLM,TextIteratorStreamer
from threading import Thread

tokenizer = AutoTokenizer.from_pretrained("Qwen/Qwen2-0.5B-Instruct")
model = AutoModelForCausalLM.from_pretrained("Qwen/Qwen2-0.5B-Instruct")
# device = "cuda"
# model.to(device)
def chat(message, history):
    prompt = [
        {"role": "system", "content": "You are a helpful assistant."},
    ]
    for i in history:
        prompt.append({"role": "user", "content": i[0]})
        prompt.append({"role": "assisant", "content": i[1]})
    prompt.append({"role": "user", "content": message})

    messages = prompt

    text = tokenizer.apply_chat_template(
    messages,
    tokenize=False,
    add_generation_prompt=True
    )   

    # model_inputs = tokenizer([text], return_tensors="pt").to("cuda")
    model_inputs = tokenizer([text], return_tensors="pt")
    streamer = TextIteratorStreamer(tokenizer, timeout=10., skip_prompt=True, skip_special_tokens=True)
    generate_kwargs = dict(
        model_inputs,
        streamer=streamer,
        max_new_tokens=512,
        do_sample=True,
        top_p=0.95,
        top_k=1000,
        temperature=1.0,
        )
    t = Thread(target=model.generate, kwargs=generate_kwargs)
    t.start()
    partial_message = ""
    for new_token in streamer:
            partial_message += new_token
            yield partial_message

avatar_images = ["https://cdn-icons-png.flaticon.com/128/3135/3135715.png",
                 "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTIJYnfODgs7q_Q4k6RoUL592NBlSF7wUTEhT92lRyqc4HTunB-"]

custom_css = """
.gradio-container {background-color: #f0f0f0;padding-top: 0px !important;}
# .container {max-width: 100px; margin: 0; font-family: 'Arial', sans-serif;}
.header {background-color: #2c3e50; color: white; padding: 10px; text-align: center; border-radius: 10px 10px 0 0;margin-bottom: 0; /* Ensure no margin below header */}
.content {background-color: white; padding: 10px; border-radius: 0 0 10px 10px; margin: 0;margin-top: 0;}
.profile-pic {width: 150px; height: 150px; border-radius: 50%; margin: 20px auto; display: block;}
.skills {display: flex; justify-content: space-around; margin-top: 20px;margin-bottom: 20px;}
.skill {text-align: center; padding: 10px; background-color: #ecf0f1; border-radius: 5px;}
.cert-row {border-bottom: 1px solid #ddd; padding: 10px 0;}
.cert-header {background-color: #f2f2f2; font-weight: bold;}

/* footer styling */
.gradio-container footer {
    display: none !important;
}
.custom-footer {
    text-align: center;
    padding: 0; /* 减小上下内边距 */
    # line-height: 1.2; /* 减小行高 */
    margin-top: 0; /* 减小与上方内容的间距 */
    margin-bottom: 0; /* 减小与下方内容的间距 */
}
.custom-footer p {
    margin: 0; /* 移除段落的默认外边距 */
}

"""
custom_footer = """
<div class="custom-footer">
    <p>© 2024 Your Company Name. All rights reserved.</p>
</div>
"""

def load_image(image_path):
    img = Image.open(image_path)
    return np.array(img)

#讀取頭貼
image_path = "/content/drive/My Drive/個人資料/頭貼.jpg"
# profile_array = load_image(image_path)

#讀去證照圖片
import gradio as gr

def render_html(prove):
    if prove is not None:
        return f'<a href="{prove}" target="_blank">點擊查看證明</a>'
    else:
        return ''

with gr.Blocks(css=custom_css,title='我的履歷') as resume_app:# title可以修改页面标题
    # with gr.Column():
        gr.HTML("""
        <div class="header">
            <h1>巫宇哲的個人簡歷</h1>
            <p>軟體工程師 | AI 愛好者 | 數據分析師</p>
        </div>
        """)
        with gr.Tab("履歷資料",elem_classes="content"):
            with gr.Row():
                with gr.Column(scale=1):
                    gr.Image('履歷資料/頭貼.jpg', elem_classes="profile-pic",show_label=False)
                    gr.Markdown("""
                    <div style="text-align:center;">
                    <p style="margin-bottom: 0;">
                        📧 <a href="mailto:a0903153387@yahoo.com.tw" style="text-decoration: none; color: inherit;">a0903153387@yahoo.com.tw</a>
                    </p>
                    <p style="margin-bottom: 0;">
                        📱 <a href="tel:+1234567890" style="text-decoration: none; color: inherit;">0916-418068</a>
                    </p>
                    <p style="margin-bottom: 0; display: flex; align-items: center; justify-content: center;">
                        <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" style="width:16px; height:16px; margin-right: 5px;">
                        <a href="https://github.com/3A732038" target="_blank" style="text-decoration: none; color: inherit;">github.com/3A732038</a>
                    </p>
                    </div>
                    """)
                    gr.Markdown("""
                    關於我
                    ===
                    熱衷於探索 AI 技術的軟體工程師,擅長 Python 和機器學習。
                    熟悉各類開發工具與框架,並具備網站開發與資料庫使用經驗。喜歡將創新想法轉化為實際應用。
                    """)
                    gr.Markdown("""

                    技能
                    ===
                    """)
                    with gr.Row(elem_classes="skills"):
                        for skill in ["Python", "深度學習", "Web 開發", "數據分析"]:
                            gr.Markdown(f"<div class='skill'>{skill}</div>")
                    with gr.Row():
                        with gr.Column(scale=2):
                            gr.Markdown("""
                            特殊經歷
                            ===         
                            """)
                            prove=['file/履歷資料/研討會證明.png','file/履歷資料/助教證明.jpg','file/履歷資料/專題名次.pdf']
                            name=['ICIM2024研討會: 提交的研究成果被接受,並在研討會上進行了發表。','碩二下學期擔任指導教授所開的類神經網路課程助教。','大學專題實務成果展競賽亞軍,技術類業界評選第一名。']
                            describe=['本研究基於研究所時期的成果,題為「基於情緒支持的對話:融合情緒感知和關鍵字識別的研究」。研究旨在通過聊天機器人為情緒困擾者提供陪伴,緩解其短期心理壓力。本文提出的模型結合情緒標籤和關鍵字識別技術,與其他基礎模型相比,能夠提供更精準的回復,從而更有效地支持用戶的情緒需求。<a href="file/履歷資料/巫宇哲_研討會.pdf" target="_blank">投稿內文連結</a>',
                                    '主要協助老師指導學生實作部分。包括使用 WEKA 軟體教導學生快速構建和分析機器學習模型,並解釋模型結果的含義。後期則引導學生安裝 Python 環境,撰寫並執行機器學習模型的程式碼,幫助學生在未來能夠運用 AI 技術更有效地完成工作。' ,
                                    '<i>專題名稱:熱影像結合人臉偵測暨網頁瀏覽系統。</i></br>為因應新冠疫情,無接觸體溫檢測需求激增,本專題開發了利用紅外線熱影像和後端資料庫蒐集,最終實現異地閱覽和確保體溫監測的安全與效率。<a href="file/履歷資料/專題文件.pdf" target="_blank">專題內文連結</a></br></br><b>我的貢獻:硬體設備組裝、人臉偵測和後端資料庫及視覺化</b>'
                                    ]
        
                            for i in range(len(name)):
                                gr.HTML(f"""
                                <div style="margin-bottom: 10px;">        
                                <ui>
                                <li>
                                <p style="font-size: 1.3em; font-weight: bold;">{name[i]}</p>
                                <span style="font-size: 1.0em; font-weight: normal;">
                                {render_html(prove[i])}   
                                </span>
                                </li>                          
                                </ui>
                                </div>
                                &emsp;<strong>內容簡述:</strong> {describe[i]}                       
                                </br>
                                </br>
                                """)  
                with gr.Column(scale=1):
                    gr.HTML('''
                    <div style="font-size: 32px; font-weight: bold; color: #2c3e50; margin: 0; padding: 0;">
                        證照
                    </div>
                    <hr style="border: none; border-top: 2px solid #2c3e50; margin: 1% 0;">
                    ''')
                    # Certificate table header
                    with gr.Row(elem_classes="cert-row cert-header"):
                        with gr.Column(scale=1, min_width=100):
                            gr.Markdown("### 證照名稱")
                        with gr.Column(scale=1, min_width=100):
                            gr.Markdown("### 證照機構")
                        with gr.Column(scale=2, min_width=200):
                            gr.Markdown("### 證照照片")

                    # Certificate data rows
                    certificates = [
                        ("電腦硬體裝修丙級", "勞動部", "履歷資料/硬體裝修丙級_mask.jpg"),
                        ("電腦硬體裝修乙級", "勞動部", "履歷資料/硬體裝修乙級_mask.jpg"),
                        ("Database Administration Fundamentals", "微軟", "履歷資料/DAF.jpg"),
                        ("Software Development Fundamentals", "微軟", "履歷資料/SDF.jpg"),
                        ("Networking Fundamentals", "微軟", "履歷資料/NF.png"),
                        ("CRM Merchandise Analyst", "微析科技", "履歷資料/crm_mask.jpg"),
                        ("Enterprise Resource Planning", "中華企業資源規劃學會", "履歷資料/erp.jpg"),
                    ]

                    for cert_name, cert_org, cert_img in certificates:
                        with gr.Row(elem_classes="cert-row"):
                            with gr.Column(scale=1, min_width=100):
                                gr.Markdown(cert_name)
                            with gr.Column(scale=1, min_width=100):
                                gr.Markdown(cert_org)
                            with gr.Column(scale=2, min_width=200):
                                gr.Image(cert_img, height=100, show_label=False)
        with gr.Tab("專案展示",elem_classes="content"):                    
            with gr.Row():
                with gr.Column(scale=1):
                    gr.Markdown("""
                        ## 學生點名系統
                        <strong>動機與目的:</strong> 鑒於每次上課點名都是老師的一大負擔,開發了這個學生點名系統,旨在幫助老師更有效地進行點名。本專案使用 Laravel 開源 PHP Web 框架開發,主要功能包括:
                        <div style="display: flex;">
                        <div style="width: 20%;">
                            <b>老師功能</b>:
                            </br>
                            - 查看課表及點名記錄</br>
                            - 查看學生出缺席和請假狀況</br>
                            - 審核學生請假申請
                        </div>
                        <div style="width: 20%;">
                            <b>學生功能:</b>
                            </br>
                            - 查看課表及進行點名</br>
                            - 查看出缺席和請假記錄</br>
                            - 申請請假
                        </div>
                        </div>
                        </br>
                        下圖為學生點名系統的截圖:
                    """)
                    with gr.Row():
                        with gr.Column(scale=1):
                            gr.Markdown("""老師主頁課表封面""")
                            gr.Image('履歷資料/網頁1.jpg',container=False)#container 決定是否外面有框框
                        with gr.Column(scale=1):  
                            gr.Markdown("""老師查看出缺席""")
                            gr.Image('履歷資料/網頁2.jpg',container=False)
                    gr.Markdown("""完整專案可參閱本github:<a href="https://github.com/WISD-2020/final02" target="_blank">學生點名系統專案</a>""")        
                    gr.Markdown("""<hr style="border-top: 2px solid;border-color:#169bf2;">""")
                    gr.Markdown("""
                    ## 氣管插管預測
                    <strong>動機與目的:</strong>為了協助醫生在執行插管時更精確地將氧氣管置入正確位置,我們利用影像分割技術(如 TransUnet、UNet++ 等)來實現該目標。最後,我們結合邊緣檢測與形態學技術,精確量化預測與實際的誤差,以提高插管的成功率並降低風險。
                    該成果如下展示:
                                """)
                    #提交要的範例後顯示對應該範例氣管插管真實和預測位置
                    def choice(input_idx,img):
                        if input_idx == "example_2":
                            return (gr.Image('履歷資料/EET_project/ex_2_pred.jpg', container=False,interactive=False,label='影像切割所預測出來的mask',visible=True,height=310),
                                     gr.Image('履歷資料/EET_project/ex_2_label.jpg', container=False,interactive=False,label='真實氣管的mask位置',visible=True,height=310)    
                            )
                        elif input_idx == "example_3":
                            return (gr.Image('履歷資料/EET_project/ex_3_pred.jpg', container=False,interactive=False,label='影像切割所預測出來的mask',visible=True,height=310),
                                    gr.Image('履歷資料/EET_project/ex_3_label.jpg', container=False,interactive=False,label='真實氣管的mask位置',visible=True,height=310)     
                            )
                        else:
                            return (gr.Image('履歷資料/EET_project/ex_1_pred.jpg', container=False,interactive=False,label='影像切割所預測出來的mask',visible=True,height=310),
                                    gr.Image('履歷資料/EET_project/ex_1_label.jpg', container=False,interactive=False,label='真實氣管的mask位置',visible=True,height=310)  
                            )    
                        
                    # 定義一個函數來根據 Dropdown 的選擇更新圖片
                    def update_image(choice):
                        # 根據選擇返回對應的圖片
                        if choice == "example_1":
                            return '履歷資料/EET_project/ex_1_init.jpg'
                        elif choice == "example_2":
                            return '履歷資料/EET_project/ex_2_init.jpg'
                        elif choice == "example_3":
                            return '履歷資料/EET_project/ex_3_init.jpg'
                    with gr.Row():
                        with gr.Column(scale=1):           
                            dropdown = gr.Dropdown(["example_1", "example_2", "example_3"], label="Endotracheal Tube資料", info="氣管X-ray影像", value="example_1", interactive=True)
                            image = gr.Image('履歷資料/EET_project/ex_1_init.jpg', container=False,interactive=False)                         
                            # 當 Dropdown 值改變時更新 Image
                            dropdown.change(fn=update_image, inputs=dropdown, outputs=image)
                            gr.Interface(choice
                                 ,inputs=[dropdown,image]
                                 ,outputs=[gr.Image(visible=False),gr.Image(visible=False)],allow_flagging='never')
                    gr.HTML("""成果文件檔案:<a href="file/履歷資料/EET_project/EET_doc.pdf" target="_blank">EET成果文件檔</a>&emsp;&emsp;完整專案可參閱本github:<a href="https://github.com/3A732038/hw2_M11123020" target="_blank">EET專案</a>""")        
                    gr.Markdown("""<hr style="border-top: 2px solid;border-color:#169bf2;">""")       
                    gr.Markdown("""
                    ## 貨車車牌辨識
                    <strong>動機與目的:</strong>為了提高貨車進出倉庫的效率,我們建立一個車牌辨識系統,該系統基於深度學習技術,主要透過yolo來偵測車牌位置,再透過OCR技術來識別車牌號碼,最後將車牌號碼與倉庫數據庫進行比對,以確保進出貨物的準確性。
                    該成果如下影片展示:                       
                    """)
                    with gr.Row(): 
                        with gr.Column(scale=1): 
                            gr.Video('履歷資料/貨車車牌/video_0001.mp4',label='原始貨車影片')
                        with gr.Column(scale=1): 
                            gr.Video('履歷資料/貨車車牌/video_0001_result.mkv',label='車牌辨識影片')  
                    gr.HTML("""成果文件檔案:<a href="file/履歷資料/貨車車牌/貨車車牌_doc.pdf" target="_blank">貨車車牌成果文件檔</a>&emsp;&emsp;完整專案可參閱本github:<a href="https://github.com/3A732038/hw3_M11123020" target="_blank">貨車車牌辨識專案</a>""")                                                    
                    gr.Markdown("""<hr style="border-top: 2px solid;border-color:#169bf2;">""") 
                    gr.Markdown("""
                    ## 聊天機器人
                    """)
                    gr.Markdown("""
                    ## 與我交談
                    歡迎使用下方的聊天機器人與我交流!
                    """)
                    gr.Markdown("""
                    <strong>動機與目的:</strong>過去在研究語言模型時,尚未設計與機器人對話的專屬介面,因此這次實作了一個簡單的聊天機器人介面。該聊天機器人基於 Qwen 大型預訓練語言模型,這是一個多語言支持的模型,供使用者進行互動體驗。
                    <br>
                    ※ 注意:若畫面出現 error,請重新整理頁面!
                    """)                    
                    gr.ChatInterface(
                        chat,
                        chatbot=gr.Chatbot(avatar_images=avatar_images),
                        textbox=gr.Textbox(placeholder="輸入你的訊息...", elem_id="textbox"),
                        submit_btn='送出',
                        clear_btn='清除',
                        retry_btn='重新送出',
                        undo_btn=None
                    )
    # gr.HTML(custom_footer)                    
resume_app.launch(allowed_paths=['./'],favicon_path='履歷資料/android-chrome-512x512.png')