resume.py

app.py

@@ -0,0 +1,303 @@
+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")
+    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
+
+
+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")
+                    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;">
+                                <a href="{prove[i]}" target="_blank">點擊查看證明</a>
+                                </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 = [
+                        ("電腦硬體裝修丙級", "勞動部", "履歷資料/硬體裝修丙級.jpg"),
+                        ("電腦硬體裝修乙級", "勞動部", "履歷資料/硬體裝修乙級.jpg"),
+                        ("Database Administration Fundamentals", "微軟", "履歷資料/DAF.jpg"),
+                        ("Software Development Fundamentals", "微軟", "履歷資料/SDF.jpg"),
+                        ("Networking Fundamentals", "微軟", "履歷資料/NF.png"),
+                        ("CRM Merchandise Analyst", "微析科技", "履歷資料/crm.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.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')