<!DOCTYPE html><html lang="ko" style="
		margin: 0;
		padding: 0;
		min-height: 100%;
		display: flex;
		flex-direction: column;
	"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="cid:css-f4b58372-a7a8-44cd-a2d5-e0a0c7958621@mhtml.blink" /><link rel="stylesheet" type="text/css" href="cid:css-f9864e9c-fe2b-4181-8789-a9e44717f3e0@mhtml.blink" /><link rel="stylesheet" type="text/css" href="cid:css-6be5fd00-56e1-4dd0-98c5-0c9c6c635f46@mhtml.blink" />
		
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		

		<meta property="og:url" content="https://gradio.app/">
		<meta property="og:type" content="website">
		<meta property="og:image" content="">
		<meta property="og:title" content="Gradio">
		<meta property="og:description" content="">
		<meta name="twitter:card" content="summary_large_image">
		<meta name="twitter:creator" content="@teamGradio">
		<meta name="twitter:title" content="Gradio">
		<meta name="twitter:description" content="">
		<meta name="twitter:image" content="">

		

		

		<link rel="preconnect" href="https://fonts.googleapis.com/">
		<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="anonymous">
		
		
		<link rel="stylesheet" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/index-DuXXhepF.css">
	<link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index-D21IHG0c.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Index-BEyjvDG_.css"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/index-DuXXhepF.css"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/theme.css?v=0d58f89b4c2aef0d338b84979b9ffb76d102d25035087d6771f50989d2612182"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Blocks-Dw_9NR1K.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/index-D5ROCp7B.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Button-uOcat6Z0.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Button-CTZL5Nos.css"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Blocks-yLdzXwzS.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&amp;display=swap"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&amp;display=swap"><title>Gradio</title><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index-QFLfeHqR.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Code-DGNrTu_I.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/BlockLabel-BXXlQleC.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Index-BicZ6NTU.css"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index-3Ud1cpPD.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Index-CptIZeFZ.css"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index-DDqzdfNS.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/index-CnqicUFC.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/ShareButton-OlciWAJu.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Image-DG8jX6JY.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/file-url-BIHPd7vS.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Image-B8dFOee4.css"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index.svelte_svelte_type_style_lang-D199jKmZ.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Check-CZUQOzJl.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Copy-B6RcHnoK.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Example.svelte_svelte_type_style_lang-qahm4PWk.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/prism-python-Bw3EYPE-.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Example-BOThR97Y.css"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Index-Xv8ZQETB.css"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/DownloadLink-BgAM71ly.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Index-D9RVvV4H.css"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/ImagePreview-DlqNSi_R.css"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index-q5DoCKkE.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Textbox-CF9-08gf.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/BlockTitle-COFLSASJ.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Info-CMIMfBX8.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Textbox-D8IAzrZj.css"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Example-C7XUkkid.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Example-Cj3ii62O.css"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index-CwNLzWTz.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Index-C43SQM_O.css"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index-DwSO5GE1.js"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index-DDCF2BFd.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Index-B0JJ6p9c.css"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index-BpBoLkq9.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Index-C5NYahSl.css"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index-CWcDktiU.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Index-CJeiS5ET.css"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index-Ix1HTuFr.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Index-BUublr_b.css"><link rel="modulepreload" as="script" crossorigin="" href="https://yuntian-deng-o1.hf.space/assets/Index-CzlZdV35.js"><link rel="stylesheet" href="https://yuntian-deng-o1.hf.space/assets/Index-BTCbxfal.css"></head>

	<body style="width: 100%; margin: 0px; padding: 0px; display: flex; flex-direction: column; flex-grow: 1; --chatbot-body-text-size: 16px;">
		<gradio-app control_page_title="true" embed="false" eager="true" style="display: flex; flex-direction: column; flex-grow: 1; background: var(--body-background-fill);">
		<div class="gradio-container gradio-container-4-44-0 svelte-wpkpf6 app" data-iframe-height="" style="min-height: initial; flex-grow: 1;"><div class="main svelte-wpkpf6">  <div class="wrap svelte-1rjryqp" style="min-height: 100%;"><div class="contain svelte-1rjryqp" style="flex-grow: 1;"><div id="component-0" class="svelte-vt1mxs gap" style="min-width: min(0px, 100%);"> <div id="component-1" class="block svelte-12cmxck padded hide-container" style="border-style: solid; overflow: visible; min-width: min(0px, 100%); border-width: var(--block-border-width);"> <div class="wrap center full svelte-au1olv hide" style="position: absolute; padding: 0px;"></div> <div class="svelte-uqf9ro"><div class="prose  svelte-1ybaih5"><h1 align="center">OpenAI-O1-Preview: Research Preview (Short-Term Availability)</h1></div></div></div><div id="component-2" class="block svelte-12cmxck padded hide-container" style="border-style: solid; overflow: visible; min-width: min(0px, 100%); border-width: var(--block-border-width);"> <div class="wrap center full svelte-au1olv hide" style="position: absolute; padding: 0px;"></div> <div class="svelte-uqf9ro"><div class="prose  svelte-1ybaih5"><h3 align="center" style="color: red;">If this app doesn't respond, consider trying our O1-mini app:<br><a href="https://huggingface.co/spaces/yuntian-deng/o1mini" target="_blank">https://huggingface.co/spaces/yuntian-deng/o1mini</a></h3></div></div></div><div id="col_container" class="svelte-vt1mxs gap" style="flex-grow: 1; min-width: min(320px, 100%);"> <div id="chatbot" class="block  svelte-12cmxck" style="height: 400px; border-style: solid; overflow: hidden; min-width: min(160px, 100%); border-width: var(--block-border-width);"><div class="wrap default minimal svelte-au1olv translucent hide" style="position: absolute; padding: 0px;"></div> <div class="wrapper svelte-nab2ao"><label for="" data-testid="block-label" class="svelte-1b6s6s float"><span class="svelte-1b6s6s"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--carbon" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M17.74 30L16 29l4-7h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9v2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h20a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4h-4.84Z"></path><path fill="currentColor" d="M8 10h16v2H8zm0 6h10v2H8z"></path></svg></span> Chatbot</label> <div class="share-button svelte-1e1jlin"><button aria-label="Share" aria-haspopup="false" title="Share" class="svelte-rk35yg padded" style="color: var(--block-label-text-color); --bg-color: var(--background-fill-primary); margin-left: 0px;"> <div class="svelte-rk35yg small"><svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M23,20a5,5,0,0,0-3.89,1.89L11.8,17.32a4.46,4.46,0,0,0,0-2.64l7.31-4.57A5,5,0,1,0,18,7a4.79,4.79,0,0,0,.2,1.32l-7.31,4.57a5,5,0,1,0,0,6.22l7.31,4.57A4.79,4.79,0,0,0,18,25a5,5,0,1,0,5-5ZM23,4a3,3,0,1,1-3,3A3,3,0,0,1,23,4ZM7,19a3,3,0,1,1,3-3A3,3,0,0,1,7,19Zm16,9a3,3,0,1,1,3-3A3,3,0,0,1,23,28Z" fill="currentColor"></path></svg></div></button></div>  <div class="bubble-wrap svelte-1e1jlin" role="log" aria-label="chatbot conversation" aria-live="polite"><div class="message-wrap svelte-1e1jlin"> <div class="message-row bubble user-row svelte-1e1jlin"> <div class="flex-wrap user svelte-1e1jlin"><div class="message user svelte-1e1jlin panel-full-width" style="text-align: right;"><button data-testid="user" dir="ltr" aria-label="user's message: 허깅페이스 스페이스에 다음의 app.py로 앱을 만들었는데, 다운로드 받을 때 &quot;FORMAT HTML&quot;이라는 기능을 넣고 싶어요.(다운로드시 체크)

Quoda Code Editor에서 Tools에 &quot;FORTMAT HTML&quot;이라는 기능이 있는데, 생략했던 <html>, <head>, <body>도 넣어주며 짝이 안맞는 </div>도 고쳐주고 '자동줄바꿈+탭들여쓰기' 다 해주므로 몇천줄이나 되는 채팅 대화 웹페이지도 편집하기가 편해지더라구요.

아무튼 그런 기능을 넣고 싶네요. 밤이 늦었으므로 내일 해볼 것인데 대충은 미리 알고 싶어요. 

==========
==========


import gradio as gr
import re
import tempfile

def extract_html_from_mht(file, start_pattern=&quot;<!DOCTYPE html&quot;, end_pattern=&quot;</html>&quot;, mode=&quot;무효 처리&quot;, occurrence=None):
    if file is None:
        return &quot;파일이 업로드되지 않았습니다.&quot;, None

    try:
        # 'binary' 타입으로 파일 내용을 직접 디코딩
        file_content = file.decode('utf-8', errors='ignore')
    except Exception as e:
        return f&quot;파일을 읽는 중 오류가 발생했습니다: {e}&quot;, None

    # 정규 표현식 패턴 생성
    # 사용자가 입력한 패턴의 특수문자를 이스케이프 처리
    pattern = re.escape(start_pattern) + r'(.*?)' + re.escape(end_pattern)

    matches = re.finditer(pattern, file_content, re.DOTALL | re.IGNORECASE)

    matches_list = [match.group(0) for match in matches]

    if not matches_list:
        return &quot;지정한 패턴에 맞는 내용이 파일에서 발견되지 않았습니다.&quot;, None

    if mode == &quot;모두 추출&quot;:
        extracted_content = &quot;\n\n&quot;.join(matches_list)
    elif mode == &quot;특정 번째 추출&quot;:
        if not occurrence:
            return &quot;추출할 Occurrence을 입력해주세요.&quot;, None
        try:
            index = int(occurrence) - 1
            if index < 0 or index >= len(matches_list):
                return f&quot;입력한 occurrence({occurrence})가 범위를 벗어났습니다. 총 {len(matches_list)}개의 매치가 있습니다.&quot;, None
            extracted_content = matches_list[index]
        except ValueError:
            return &quot;Occurrence은 숫자여야 합니다.&quot;, None
    elif mode == &quot;무효 처리&quot;:
        if len(matches_list) > 1:
            return f&quot;패턴이 여러 번 발견되었습니다 ({len(matches_list)}회). 무효로 처리됩니다.&quot;, None
        extracted_content = matches_list[0]
    else:
        return &quot;유효하지 않은 처리 모드입니다.&quot;, None

    # 임시 파일 생성 및 내용 쓰기
    try:
        with tempfile.NamedTemporaryFile(delete=False, suffix=&quot;.html&quot;, mode='w', encoding='utf-8') as temp_file:
            temp_file.write(extracted_content)
            temp_file_path = temp_file.name
    except Exception as e:
        return f&quot;임시 파일을 생성하는 중 오류가 발생했습니다: {e}&quot;, None

    return None, temp_file_path

def toggle_occurrence_visibility(mode):
    return gr.update(visible=(mode == &quot;특정 번째 추출&quot;))

with gr.Blocks() as demo:
    gr.Markdown(&quot;# 파일에서 특정 부분 추출 및 다운로드&quot;)
    gr.Markdown(&quot;&quot;&quot;
    이 앱을 사용하면 업로드한 MHT 또는 HTML 파일에서 특정 패턴에 맞는 부분을 추출하여 다운로드할 수 있습니다.
    &quot;&quot;&quot;)

    with gr.Row():
        with gr.Column():
            file_input = gr.File(
                label=&quot;파일 업로드&quot;,
                file_types=[&quot;text&quot;, &quot;html&quot;, &quot;mht&quot;],
                type=&quot;binary&quot;  # 'binary'로 수정
            )
            start_input = gr.Textbox(
                label=&quot;시작 패턴&quot;,
                value=&quot;<!DOCTYPE html>&quot;,
                placeholder=&quot;시작 부분을 지정하세요 (예: <!DOCTYPE html>)&quot;
            )
            end_input = gr.Textbox(
                label=&quot;끝 패턴&quot;,
                value=&quot;</html>&quot;,
                placeholder=&quot;끝 부분을 지정하세요 (예: </html>)&quot;
            )
            mode_dropdown = gr.Dropdown(
                label=&quot;매치 처리 방식&quot;,
                choices=[&quot;무효 처리&quot;, &quot;모두 추출&quot;, &quot;특정 번째 추출&quot;],
                value=&quot;무효 처리&quot;
            )
            occurrence_input = gr.Textbox(
                label=&quot;추출할 Occurrence 번호 (mode가 '특정 번째 추출'일 때)&quot;,
                placeholder=&quot;예: 1&quot;,
                visible=False
            )
            extract_button = gr.Button(&quot;부분 추출 및 다운로드&quot;)

        with gr.Column():
            output_message = gr.Markdown(&quot;&quot;)
            download_output = gr.File(label=&quot;추출된 파일 다운로드&quot;)

    mode_dropdown.change(
        fn=toggle_occurrence_visibility,
        inputs=mode_dropdown,
        outputs=occurrence_input
    )

    extract_button.click(
        fn=extract_html_from_mht,
        inputs=[file_input, start_input, end_input, mode_dropdown, occurrence_input],
        outputs=[output_message, download_output]
    )

    demo.launch()" class="svelte-1e1jlin" style="user-select: text; cursor: default; text-align: left;"><span class="md svelte-8tpqd2 chatbot prose"><p>허깅페이스 스페이스에 다음의 app.py로 앱을 만들었는데, 다운로드 받을 때 "FORMAT HTML"이라는 기능을 넣고 싶어요.(다운로드시 체크)</p>
<p>Quoda Code Editor에서 Tools에 "FORTMAT HTML"이라는 기능이 있는데, 생략했던 , , 도 넣어주며 짝이 안맞는 도 고쳐주고 '자동줄바꿈+탭들여쓰기' 다 해주므로 몇천줄이나 되는 채팅 대화 웹페이지도 편집하기가 편해지더라구요.</p>
<p>아무튼 그런 기능을 넣고 싶네요. 밤이 늦었으므로 내일 해볼 것인데 대충은 미리 알고 싶어요. </p>
<h1>==========</h1>
<p>import gradio as gr<br>import re<br>import tempfile</p>
<p>def extract_html_from_mht(file, start_pattern="", mode="무효 처리", occurrence=None):<br>    if file is None:<br>        return "파일이 업로드되지 않았습니다.", None</p>
<div class="code_wrap"><button class="copy_code_button" title="copy">
<span class="copy-text"><svg viewBox="0 0 32 32" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" fill="currentColor"></path><path d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" fill="currentColor"></path></svg></span>
<span class="check"><svg stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
</button><pre><code>try:
    # 'binary' 타입으로 파일 내용을 직접 디코딩
    file_content = file.decode('utf-8', errors='ignore')
except Exception as e:
    return f"파일을 읽는 중 오류가 발생했습니다: {e}", None

# 정규 표현식 패턴 생성
# 사용자가 입력한 패턴의 특수문자를 이스케이프 처리
pattern = re.escape(start_pattern) + r'(.*?)' + re.escape(end_pattern)

matches = re.finditer(pattern, file_content, re.DOTALL | re.IGNORECASE)

matches_list = [match.group(0) for match in matches]

if not matches_list:
    return "지정한 패턴에 맞는 내용이 파일에서 발견되지 않았습니다.", None

if mode == "모두 추출":
    extracted_content = "\n\n".join(matches_list)
elif mode == "특정 번째 추출":
    if not occurrence:
        return "추출할 Occurrence을 입력해주세요.", None
    try:
        index = int(occurrence) - 1
        if index &lt; 0 or index &gt;= len(matches_list):
            return f"입력한 occurrence({occurrence})가 범위를 벗어났습니다. 총 {len(matches_list)}개의 매치가 있습니다.", None
        extracted_content = matches_list[index]
    except ValueError:
        return "Occurrence은 숫자여야 합니다.", None
elif mode == "무효 처리":
    if len(matches_list) &gt; 1:
        return f"패턴이 여러 번 발견되었습니다 ({len(matches_list)}회). 무효로 처리됩니다.", None
    extracted_content = matches_list[0]
else:
    return "유효하지 않은 처리 모드입니다.", None

# 임시 파일 생성 및 내용 쓰기
try:
    with tempfile.NamedTemporaryFile(delete=False, suffix=".html", mode='w', encoding='utf-8') as temp_file:
        temp_file.write(extracted_content)
        temp_file_path = temp_file.name
except Exception as e:
    return f"임시 파일을 생성하는 중 오류가 발생했습니다: {e}", None

return None, temp_file_path
</code></pre></div>
<p>def toggle_occurrence_visibility(mode):<br>    return gr.update(visible=(mode == "특정 번째 추출"))</p>
<p>with gr.Blocks() as demo:<br>    gr.Markdown("# 파일에서 특정 부분 추출 및 다운로드")<br>    gr.Markdown("""<br>    이 앱을 사용하면 업로드한 MHT 또는 HTML 파일에서 특정 패턴에 맞는 부분을 추출하여 다운로드할 수 있습니다.<br>    """)</p>
<div class="code_wrap"><button class="copy_code_button" title="copy">
<span class="copy-text"><svg viewBox="0 0 32 32" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" fill="currentColor"></path><path d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" fill="currentColor"></path></svg></span>
<span class="check"><svg stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
</button><pre><code>with gr.Row():
    with gr.Column():
        file_input = gr.File(
            label="파일 업로드",
            file_types=["text", "html", "mht"],
            type="binary"  # 'binary'로 수정
        )
        start_input = gr.Textbox(
            label="시작 패턴",
            value="&lt;!DOCTYPE html&gt;",
            placeholder="시작 부분을 지정하세요 (예: &lt;!DOCTYPE html&gt;)"
        )
        end_input = gr.Textbox(
            label="끝 패턴",
            value="&lt;/html&gt;",
            placeholder="끝 부분을 지정하세요 (예: &lt;/html&gt;)"
        )
        mode_dropdown = gr.Dropdown(
            label="매치 처리 방식",
            choices=["무효 처리", "모두 추출", "특정 번째 추출"],
            value="무효 처리"
        )
        occurrence_input = gr.Textbox(
            label="추출할 Occurrence 번호 (mode가 '특정 번째 추출'일 때)",
            placeholder="예: 1",
            visible=False
        )
        extract_button = gr.Button("부분 추출 및 다운로드")

    with gr.Column():
        output_message = gr.Markdown("")
        download_output = gr.File(label="추출된 파일 다운로드")

mode_dropdown.change(
    fn=toggle_occurrence_visibility,
    inputs=mode_dropdown,
    outputs=occurrence_input
)

extract_button.click(
    fn=extract_html_from_mht,
    inputs=[file_input, start_input, end_input, mode_dropdown, occurrence_input],
    outputs=[output_message, download_output]
)

demo.launch()
</code></pre></div>
</span></button> </div></div></div>  <div class="message-row bubble bot-row svelte-1e1jlin"> <div class="flex-wrap bot svelte-1e1jlin"><div class="message bot svelte-1e1jlin panel-full-width" style="text-align: right;"><button data-testid="bot" dir="ltr" aria-label="bot's message: 안녕하세요! Gradio 앱에 &quot;FORMAT HTML&quot; 기능을 추가하는 데 도움을 드리겠습니다.

HTML을 포맷하고 잘못된 태그를 수정하기 위해 Python에서 사용할 수 있는 라이브러리 중 하나는 **BeautifulSoup**입니다. BeautifulSoup은 불완전하거나 손상된 HTML도 파싱할 수 있으며, 누락된 태그나 태그 짝이 맞지 않는 문제를 해결하는 데 유용합니다.

다음은 이 기능을 구현하는 단계입니다:

---

### 1. **BeautifulSoup 설치**

Hugging Face Spaces에서 앱을 실행할 때 필요한 라이브러리를 `requirements.txt`에 추가해야 합니다.

`requirements.txt` 파일에 다음을 추가하세요:

```
beautifulsoup4
html5lib
```

`html5lib` 파서를 사용하면 더 견고하게 HTML을 파싱하고 수정할 수 있습니다.

---

### 2. **Gradio 인터페이스에 &quot;FORMAT HTML&quot; 옵션 추가**

Gradio 앱에 체크박스를 추가하여 사용자가 HTML 포맷 여부를 선택할 수 있도록 합니다.

```python
with gr.Column():
    # 기존 입력 요소들...
    format_html_checkbox = gr.Checkbox(
        label=&quot;FORMAT HTML&quot;,
        value=False
    )
    extract_button = gr.Button(&quot;부분 추출 및 다운로드&quot;)
```

---

### 3. **함수에 format_html 인자 추가 및 구현**

`extract_html_from_mht` 함수에 `format_html` 매개변수를 추가하고, HTML 포맷 기능을 구현합니다.

```python
from bs4 import BeautifulSoup  # 상단에 추가

def extract_html_from_mht(file, start_pattern=&quot;<!DOCTYPE html&quot;, end_pattern=&quot;</html>&quot;, mode=&quot;무효 처리&quot;, occurrence=None, format_html=False):
    if file is None:
        return &quot;파일이 업로드되지 않았습니다.&quot;, None

    try:
        file_content = file.decode('utf-8', errors='ignore')
    except Exception as e:
        return f&quot;파일을 읽는 중 오류가 발생했습니다: {e}&quot;, None

    pattern = re.escape(start_pattern) + r'(.*?)' + re.escape(end_pattern)
    matches = re.finditer(pattern, file_content, re.DOTALL | re.IGNORECASE)
    matches_list = [match.group(0) for match in matches]

    if not matches_list:
        return &quot;지정한 패턴에 맞는 내용이 파일에서 발견되지 않았습니다.&quot;, None

    if mode == &quot;모두 추출&quot;:
        extracted_content = &quot;\n\n&quot;.join(matches_list)
    elif mode == &quot;특정 번째 추출&quot;:
        if not occurrence:
            return &quot;추출할 Occurrence을 입력해주세요.&quot;, None
        try:
            index = int(occurrence) - 1
            if index < 0 or index >= len(matches_list):
                return f&quot;입력한 occurrence({occurrence})가 범위를 벗어났습니다. 총 {len(matches_list)}개의 매치가 있습니다.&quot;, None
            extracted_content = matches_list[index]
        except ValueError:
            return &quot;Occurrence은 숫자여야 합니다.&quot;, None
    elif mode == &quot;무효 처리&quot;:
        if len(matches_list) > 1:
            return f&quot;패턴이 여러 번 발견되었습니다 ({len(matches_list)}회). 무효로 처리됩니다.&quot;, None
        extracted_content = matches_list[0]
    else:
        return &quot;유효하지 않은 처리 모드입니다.&quot;, None

    # FORMAT HTML 기능 구현
    if format_html:
        try:
            soup = BeautifulSoup(extracted_content, 'html5lib')
            extracted_content = soup.prettify()
        except Exception as e:
            return f&quot;HTML을 포맷하는 중 오류가 발생했습니다: {e}&quot;, None

    try:
        with tempfile.NamedTemporaryFile(delete=False, suffix=&quot;.html&quot;, mode='w', encoding='utf-8') as temp_file:
            temp_file.write(extracted_content)
            temp_file_path = temp_file.name
    except Exception as e:
        return f&quot;임시 파일을 생성하는 중 오류가 발생했습니다: {e}&quot;, None

    return None, temp_file_path
```

---

### 4. **Gradio 이벤트에 format_html_checkbox 추가**

`extract_button.click` 함수에 `format_html_checkbox`를 입력으로 추가합니다.

```python
extract_button.click(
    fn=extract_html_from_mht,
    inputs=[file_input, start_input, end_input, mode_dropdown, occurrence_input, format_html_checkbox],
    outputs=[output_message, download_output]
)
```

---

### 5. **전체 코드**

최종적으로 수정된 전체 코드는 다음과 같습니다:

```python
import gradio as gr
import re
import tempfile
from bs4 import BeautifulSoup  # 추가

def extract_html_from_mht(file, start_pattern=&quot;<!DOCTYPE html&quot;, end_pattern=&quot;</html>&quot;, mode=&quot;무효 처리&quot;, occurrence=None, format_html=False):
    if file is None:
        return &quot;파일이 업로드되지 않았습니다.&quot;, None

    try:
        file_content = file.decode('utf-8', errors='ignore')
    except Exception as e:
        return f&quot;파일을 읽는 중 오류가 발생했습니다: {e}&quot;, None

    pattern = re.escape(start_pattern) + r'(.*?)' + re.escape(end_pattern)
    matches = re.finditer(pattern, file_content, re.DOTALL | re.IGNORECASE)
    matches_list = [match.group(0) for match in matches]

    if not matches_list:
        return &quot;지정한 패턴에 맞는 내용이 파일에서 발견되지 않았습니다.&quot;, None

    if mode == &quot;모두 추출&quot;:
        extracted_content = &quot;\n\n&quot;.join(matches_list)
    elif mode == &quot;특정 번째 추출&quot;:
        if not occurrence:
            return &quot;추출할 Occurrence을 입력해주세요.&quot;, None
        try:
            index = int(occurrence) - 1
            if index < 0 or index >= len(matches_list):
                return f&quot;입력한 occurrence({occurrence})가 범위를 벗어났습니다. 총 {len(matches_list)}개의 매치가 있습니다.&quot;, None
            extracted_content = matches_list[index]
        except ValueError:
            return &quot;Occurrence은 숫자여야 합니다.&quot;, None
    elif mode == &quot;무효 처리&quot;:
        if len(matches_list) > 1:
            return f&quot;패턴이 여러 번 발견되었습니다 ({len(matches_list)}회). 무효로 처리됩니다.&quot;, None
        extracted_content = matches_list[0]
    else:
        return &quot;유효하지 않은 처리 모드입니다.&quot;, None

    # FORMAT HTML 기능 구현
    if format_html:
        try:
            soup = BeautifulSoup(extracted_content, 'html5lib')
            extracted_content = soup.prettify()
        except Exception as e:
            return f&quot;HTML을 포맷하는 중 오류가 발생했습니다: {e}&quot;, None

    try:
        with tempfile.NamedTemporaryFile(delete=False, suffix=&quot;.html&quot;, mode='w', encoding='utf-8') as temp_file:
            temp_file.write(extracted_content)
            temp_file_path = temp_file.name
    except Exception as e:
        return f&quot;임시 파일을 생성하는 중 오류가 발생했습니다: {e}&quot;, None

    return None, temp_file_path

def toggle_occurrence_visibility(mode):
    return gr.update(visible=(mode == &quot;특정 번째 추출&quot;))

with gr.Blocks() as demo:
    gr.Markdown(&quot;# 파일에서 특정 부분 추출 및 다운로드&quot;)
    gr.Markdown(&quot;&quot;&quot;
    이 앱을 사용하면 업로드한 MHT 또는 HTML 파일에서 특정 패턴에 맞는 부분을 추출하여 다운로드할 수 있습니다.
    &quot;&quot;&quot;)

    with gr.Row():
        with gr.Column():
            file_input = gr.File(
                label=&quot;파일 업로드&quot;,
                file_types=[&quot;text&quot;, &quot;html&quot;, &quot;mht&quot;],
                type=&quot;binary&quot;  # 'binary'로 수정
            )
            start_input = gr.Textbox(
                label=&quot;시작 패턴&quot;,
                value=&quot;<!DOCTYPE html>&quot;,
                placeholder=&quot;시작 부분을 지정하세요 (예: <!DOCTYPE html>)&quot;
            )
            end_input = gr.Textbox(
                label=&quot;끝 패턴&quot;,
                value=&quot;</html>&quot;,
                placeholder=&quot;끝 부분을 지정하세요 (예: </html>)&quot;
            )
            mode_dropdown = gr.Dropdown(
                label=&quot;매치 처리 방식&quot;,
                choices=[&quot;무효 처리&quot;, &quot;모두 추출&quot;, &quot;특정 번째 추출&quot;],
                value=&quot;무효 처리&quot;
            )
            occurrence_input = gr.Textbox(
                label=&quot;추출할 Occurrence 번호 (mode가 '특정 번째 추출'일 때)&quot;,
                placeholder=&quot;예: 1&quot;,
                visible=False
            )
            format_html_checkbox = gr.Checkbox(
                label=&quot;FORMAT HTML&quot;,
                value=False
            )
            extract_button = gr.Button(&quot;부분 추출 및 다운로드&quot;)

        with gr.Column():
            output_message = gr.Markdown(&quot;&quot;)
            download_output = gr.File(label=&quot;추출된 파일 다운로드&quot;)

    mode_dropdown.change(
        fn=toggle_occurrence_visibility,
        inputs=mode_dropdown,
        outputs=occurrence_input
    )

    extract_button.click(
        fn=extract_html_from_mht,
        inputs=[file_input, start_input, end_input, mode_dropdown, occurrence_input, format_html_checkbox],
        outputs=[output_message, download_output]
    )

    demo.launch()
```

---

### 6. **테스트**

변경 사항을 적용한 후, 로컬 또는 Hugging Face Spaces에서 앱을 실행하여 기능이 정상적으로 동작하는지 확인하세요.

---

### 추가 설명:

- **BeautifulSoup와 html5lib**: `html5lib` 파서를 사용하면 BeautifulSoup이 더 다양한 HTML 오류를 자동으로 수정할 수 있습니다. 이는 누락된 태그나 잘못된 태그 구조를 가진 HTML을 처리할 때 유용합니다.

- **`soup.prettify()`**: 이 메소드는 HTML을 보기 좋게 들여쓰기와 줄 바꿈을 추가하여 포맷팅합니다.

- **오류 처리**: HTML 포맷팅 중 발생할 수 있는 예외를 처리하기 위해 `try-except` 블록을 추가했습니다.

- **`requirements.txt` 확인**: Hugging Face Spaces에서 앱을 실행할 때 필요한 모든 라이브러리가 `requirements.txt`에 포함되어 있는지 확인하세요.

---

이렇게 수정하면 사용자가 &quot;FORMAT HTML&quot; 체크박스를 선택할 경우, 업로드한 파일에서 추출된 HTML 부분이 자동으로 포맷팅되어 다운로드됩니다.

궁금한 점이 있거나 추가 도움이 필요하시면 언제든지 말씀해주세요!" class="svelte-1e1jlin latest" style="user-select: text; cursor: default; text-align: left;"><span class="md svelte-8tpqd2 chatbot prose"><p>안녕하세요! Gradio 앱에 "FORMAT HTML" 기능을 추가하는 데 도움을 드리겠습니다.</p>
<p>HTML을 포맷하고 잘못된 태그를 수정하기 위해 Python에서 사용할 수 있는 라이브러리 중 하나는 <strong>BeautifulSoup</strong>입니다. BeautifulSoup은 불완전하거나 손상된 HTML도 파싱할 수 있으며, 누락된 태그나 태그 짝이 맞지 않는 문제를 해결하는 데 유용합니다.</p>
<p>다음은 이 기능을 구현하는 단계입니다:</p>
<hr>
<h3>1. <strong>BeautifulSoup 설치</strong></h3>
<p>Hugging Face Spaces에서 앱을 실행할 때 필요한 라이브러리를 <code>requirements.txt</code>에 추가해야 합니다.</p>
<p><code>requirements.txt</code> 파일에 다음을 추가하세요:</p>
<div class="code_wrap"><button class="copy_code_button" title="copy">
<span class="copy-text"><svg viewBox="0 0 32 32" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" fill="currentColor"></path><path d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" fill="currentColor"></path></svg></span>
<span class="check"><svg stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
</button><pre><code>beautifulsoup4
html5lib
</code></pre></div>
<p><code>html5lib</code> 파서를 사용하면 더 견고하게 HTML을 파싱하고 수정할 수 있습니다.</p>
<hr>
<h3>2. <strong>Gradio 인터페이스에 "FORMAT HTML" 옵션 추가</strong></h3>
<p>Gradio 앱에 체크박스를 추가하여 사용자가 HTML 포맷 여부를 선택할 수 있도록 합니다.</p>
<div class="code_wrap"><button class="copy_code_button" title="copy">
<span class="copy-text"><svg viewBox="0 0 32 32" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" fill="currentColor"></path><path d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" fill="currentColor"></path></svg></span>
<span class="check"><svg stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
</button><pre><code class="language-python"><span class="token keyword">with</span> gr<span class="token punctuation">.</span>Column<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
    <span class="token comment"># 기존 입력 요소들...</span>
    format_html_checkbox <span class="token operator">=</span> gr<span class="token punctuation">.</span>Checkbox<span class="token punctuation">(</span>
        label<span class="token operator">=</span><span class="token string">"FORMAT HTML"</span><span class="token punctuation">,</span>
        value<span class="token operator">=</span><span class="token boolean">False</span>
    <span class="token punctuation">)</span>
    extract_button <span class="token operator">=</span> gr<span class="token punctuation">.</span>Button<span class="token punctuation">(</span><span class="token string">"부분 추출 및 다운로드"</span><span class="token punctuation">)</span>
</code></pre></div>
<hr>
<h3>3. <strong>함수에 format_html 인자 추가 및 구현</strong></h3>
<p><code>extract_html_from_mht</code> 함수에 <code>format_html</code> 매개변수를 추가하고, HTML 포맷 기능을 구현합니다.</p>
<div class="code_wrap"><button class="copy_code_button" title="copy">
<span class="copy-text"><svg viewBox="0 0 32 32" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" fill="currentColor"></path><path d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" fill="currentColor"></path></svg></span>
<span class="check"><svg stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
</button><pre><code class="language-python"><span class="token keyword">from</span> bs4 <span class="token keyword">import</span> BeautifulSoup  <span class="token comment"># 상단에 추가</span>

<span class="token keyword">def</span> <span class="token function">extract_html_from_mht</span><span class="token punctuation">(</span><span class="token builtin">file</span><span class="token punctuation">,</span> start_pattern<span class="token operator">=</span><span class="token string">"&lt;!DOCTYPE html"</span><span class="token punctuation">,</span> end_pattern<span class="token operator">=</span><span class="token string">"&lt;/html&gt;"</span><span class="token punctuation">,</span> mode<span class="token operator">=</span><span class="token string">"무효 처리"</span><span class="token punctuation">,</span> occurrence<span class="token operator">=</span><span class="token boolean">None</span><span class="token punctuation">,</span> format_html<span class="token operator">=</span><span class="token boolean">False</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
    <span class="token keyword">if</span> <span class="token builtin">file</span> <span class="token keyword">is</span> <span class="token boolean">None</span><span class="token punctuation">:</span>
        <span class="token keyword">return</span> <span class="token string">"파일이 업로드되지 않았습니다."</span><span class="token punctuation">,</span> <span class="token boolean">None</span>

    <span class="token keyword">try</span><span class="token punctuation">:</span>
        file_content <span class="token operator">=</span> <span class="token builtin">file</span><span class="token punctuation">.</span>decode<span class="token punctuation">(</span><span class="token string">'utf-8'</span><span class="token punctuation">,</span> errors<span class="token operator">=</span><span class="token string">'ignore'</span><span class="token punctuation">)</span>
    <span class="token keyword">except</span> Exception <span class="token keyword">as</span> e<span class="token punctuation">:</span>
        <span class="token keyword">return</span> <span class="token string-interpolation"><span class="token string">f"파일을 읽는 중 오류가 발생했습니다: </span><span class="token interpolation"><span class="token punctuation">{</span>e<span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">,</span> <span class="token boolean">None</span>

    pattern <span class="token operator">=</span> re<span class="token punctuation">.</span>escape<span class="token punctuation">(</span>start_pattern<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">r'(.*?)'</span> <span class="token operator">+</span> re<span class="token punctuation">.</span>escape<span class="token punctuation">(</span>end_pattern<span class="token punctuation">)</span>
    matches <span class="token operator">=</span> re<span class="token punctuation">.</span>finditer<span class="token punctuation">(</span>pattern<span class="token punctuation">,</span> file_content<span class="token punctuation">,</span> re<span class="token punctuation">.</span>DOTALL <span class="token operator">|</span> re<span class="token punctuation">.</span>IGNORECASE<span class="token punctuation">)</span>
    matches_list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">match</span><span class="token punctuation">.</span>group<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">for</span> <span class="token keyword">match</span> <span class="token keyword">in</span> matches<span class="token punctuation">]</span>

    <span class="token keyword">if</span> <span class="token keyword">not</span> matches_list<span class="token punctuation">:</span>
        <span class="token keyword">return</span> <span class="token string">"지정한 패턴에 맞는 내용이 파일에서 발견되지 않았습니다."</span><span class="token punctuation">,</span> <span class="token boolean">None</span>

    <span class="token keyword">if</span> mode <span class="token operator">==</span> <span class="token string">"모두 추출"</span><span class="token punctuation">:</span>
        extracted_content <span class="token operator">=</span> <span class="token string">"\n\n"</span><span class="token punctuation">.</span>join<span class="token punctuation">(</span>matches_list<span class="token punctuation">)</span>
    <span class="token keyword">elif</span> mode <span class="token operator">==</span> <span class="token string">"특정 번째 추출"</span><span class="token punctuation">:</span>
        <span class="token keyword">if</span> <span class="token keyword">not</span> occurrence<span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">"추출할 Occurrence을 입력해주세요."</span><span class="token punctuation">,</span> <span class="token boolean">None</span>
        <span class="token keyword">try</span><span class="token punctuation">:</span>
            index <span class="token operator">=</span> <span class="token builtin">int</span><span class="token punctuation">(</span>occurrence<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span>
            <span class="token keyword">if</span> index <span class="token operator">&lt;</span> <span class="token number">0</span> <span class="token keyword">or</span> index <span class="token operator">&gt;=</span> <span class="token builtin">len</span><span class="token punctuation">(</span>matches_list<span class="token punctuation">)</span><span class="token punctuation">:</span>
                <span class="token keyword">return</span> <span class="token string-interpolation"><span class="token string">f"입력한 occurrence(</span><span class="token interpolation"><span class="token punctuation">{</span>occurrence<span class="token punctuation">}</span></span><span class="token string">)가 범위를 벗어났습니다. 총 </span><span class="token interpolation"><span class="token punctuation">{</span><span class="token builtin">len</span><span class="token punctuation">(</span>matches_list<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token string">개의 매치가 있습니다."</span></span><span class="token punctuation">,</span> <span class="token boolean">None</span>
            extracted_content <span class="token operator">=</span> matches_list<span class="token punctuation">[</span>index<span class="token punctuation">]</span>
        <span class="token keyword">except</span> ValueError<span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">"Occurrence은 숫자여야 합니다."</span><span class="token punctuation">,</span> <span class="token boolean">None</span>
    <span class="token keyword">elif</span> mode <span class="token operator">==</span> <span class="token string">"무효 처리"</span><span class="token punctuation">:</span>
        <span class="token keyword">if</span> <span class="token builtin">len</span><span class="token punctuation">(</span>matches_list<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">1</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string-interpolation"><span class="token string">f"패턴이 여러 번 발견되었습니다 (</span><span class="token interpolation"><span class="token punctuation">{</span><span class="token builtin">len</span><span class="token punctuation">(</span>matches_list<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token string">회). 무효로 처리됩니다."</span></span><span class="token punctuation">,</span> <span class="token boolean">None</span>
        extracted_content <span class="token operator">=</span> matches_list<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
    <span class="token keyword">else</span><span class="token punctuation">:</span>
        <span class="token keyword">return</span> <span class="token string">"유효하지 않은 처리 모드입니다."</span><span class="token punctuation">,</span> <span class="token boolean">None</span>

    <span class="token comment"># FORMAT HTML 기능 구현</span>
    <span class="token keyword">if</span> format_html<span class="token punctuation">:</span>
        <span class="token keyword">try</span><span class="token punctuation">:</span>
            soup <span class="token operator">=</span> BeautifulSoup<span class="token punctuation">(</span>extracted_content<span class="token punctuation">,</span> <span class="token string">'html5lib'</span><span class="token punctuation">)</span>
            extracted_content <span class="token operator">=</span> soup<span class="token punctuation">.</span>prettify<span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">except</span> Exception <span class="token keyword">as</span> e<span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string-interpolation"><span class="token string">f"HTML을 포맷하는 중 오류가 발생했습니다: </span><span class="token interpolation"><span class="token punctuation">{</span>e<span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">,</span> <span class="token boolean">None</span>

    <span class="token keyword">try</span><span class="token punctuation">:</span>
        <span class="token keyword">with</span> tempfile<span class="token punctuation">.</span>NamedTemporaryFile<span class="token punctuation">(</span>delete<span class="token operator">=</span><span class="token boolean">False</span><span class="token punctuation">,</span> suffix<span class="token operator">=</span><span class="token string">".html"</span><span class="token punctuation">,</span> mode<span class="token operator">=</span><span class="token string">'w'</span><span class="token punctuation">,</span> encoding<span class="token operator">=</span><span class="token string">'utf-8'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> temp_file<span class="token punctuation">:</span>
            temp_file<span class="token punctuation">.</span>write<span class="token punctuation">(</span>extracted_content<span class="token punctuation">)</span>
            temp_file_path <span class="token operator">=</span> temp_file<span class="token punctuation">.</span>name
    <span class="token keyword">except</span> Exception <span class="token keyword">as</span> e<span class="token punctuation">:</span>
        <span class="token keyword">return</span> <span class="token string-interpolation"><span class="token string">f"임시 파일을 생성하는 중 오류가 발생했습니다: </span><span class="token interpolation"><span class="token punctuation">{</span>e<span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">,</span> <span class="token boolean">None</span>

    <span class="token keyword">return</span> <span class="token boolean">None</span><span class="token punctuation">,</span> temp_file_path
</code></pre></div>
<hr>
<h3>4. <strong>Gradio 이벤트에 format_html_checkbox 추가</strong></h3>
<p><code>extract_button.click</code> 함수에 <code>format_html_checkbox</code>를 입력으로 추가합니다.</p>
<div class="code_wrap"><button class="copy_code_button" title="copy">
<span class="copy-text"><svg viewBox="0 0 32 32" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" fill="currentColor"></path><path d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" fill="currentColor"></path></svg></span>
<span class="check"><svg stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
</button><pre><code class="language-python">extract_button<span class="token punctuation">.</span>click<span class="token punctuation">(</span>
    fn<span class="token operator">=</span>extract_html_from_mht<span class="token punctuation">,</span>
    inputs<span class="token operator">=</span><span class="token punctuation">[</span>file_input<span class="token punctuation">,</span> start_input<span class="token punctuation">,</span> end_input<span class="token punctuation">,</span> mode_dropdown<span class="token punctuation">,</span> occurrence_input<span class="token punctuation">,</span> format_html_checkbox<span class="token punctuation">]</span><span class="token punctuation">,</span>
    outputs<span class="token operator">=</span><span class="token punctuation">[</span>output_message<span class="token punctuation">,</span> download_output<span class="token punctuation">]</span>
<span class="token punctuation">)</span>
</code></pre></div>
<hr>
<h3>5. <strong>전체 코드</strong></h3>
<p>최종적으로 수정된 전체 코드는 다음과 같습니다:</p>
<div class="code_wrap"><button class="copy_code_button" title="copy">
<span class="copy-text"><svg viewBox="0 0 32 32" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" fill="currentColor"></path><path d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" fill="currentColor"></path></svg></span>
<span class="check"><svg stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
</button><pre><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
<span class="token keyword">import</span> re
<span class="token keyword">import</span> tempfile
<span class="token keyword">from</span> bs4 <span class="token keyword">import</span> BeautifulSoup  <span class="token comment"># 추가</span>

<span class="token keyword">def</span> <span class="token function">extract_html_from_mht</span><span class="token punctuation">(</span><span class="token builtin">file</span><span class="token punctuation">,</span> start_pattern<span class="token operator">=</span><span class="token string">"&lt;!DOCTYPE html"</span><span class="token punctuation">,</span> end_pattern<span class="token operator">=</span><span class="token string">"&lt;/html&gt;"</span><span class="token punctuation">,</span> mode<span class="token operator">=</span><span class="token string">"무효 처리"</span><span class="token punctuation">,</span> occurrence<span class="token operator">=</span><span class="token boolean">None</span><span class="token punctuation">,</span> format_html<span class="token operator">=</span><span class="token boolean">False</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
    <span class="token keyword">if</span> <span class="token builtin">file</span> <span class="token keyword">is</span> <span class="token boolean">None</span><span class="token punctuation">:</span>
        <span class="token keyword">return</span> <span class="token string">"파일이 업로드되지 않았습니다."</span><span class="token punctuation">,</span> <span class="token boolean">None</span>

    <span class="token keyword">try</span><span class="token punctuation">:</span>
        file_content <span class="token operator">=</span> <span class="token builtin">file</span><span class="token punctuation">.</span>decode<span class="token punctuation">(</span><span class="token string">'utf-8'</span><span class="token punctuation">,</span> errors<span class="token operator">=</span><span class="token string">'ignore'</span><span class="token punctuation">)</span>
    <span class="token keyword">except</span> Exception <span class="token keyword">as</span> e<span class="token punctuation">:</span>
        <span class="token keyword">return</span> <span class="token string-interpolation"><span class="token string">f"파일을 읽는 중 오류가 발생했습니다: </span><span class="token interpolation"><span class="token punctuation">{</span>e<span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">,</span> <span class="token boolean">None</span>

    pattern <span class="token operator">=</span> re<span class="token punctuation">.</span>escape<span class="token punctuation">(</span>start_pattern<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">r'(.*?)'</span> <span class="token operator">+</span> re<span class="token punctuation">.</span>escape<span class="token punctuation">(</span>end_pattern<span class="token punctuation">)</span>
    matches <span class="token operator">=</span> re<span class="token punctuation">.</span>finditer<span class="token punctuation">(</span>pattern<span class="token punctuation">,</span> file_content<span class="token punctuation">,</span> re<span class="token punctuation">.</span>DOTALL <span class="token operator">|</span> re<span class="token punctuation">.</span>IGNORECASE<span class="token punctuation">)</span>
    matches_list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">match</span><span class="token punctuation">.</span>group<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">for</span> <span class="token keyword">match</span> <span class="token keyword">in</span> matches<span class="token punctuation">]</span>

    <span class="token keyword">if</span> <span class="token keyword">not</span> matches_list<span class="token punctuation">:</span>
        <span class="token keyword">return</span> <span class="token string">"지정한 패턴에 맞는 내용이 파일에서 발견되지 않았습니다."</span><span class="token punctuation">,</span> <span class="token boolean">None</span>

    <span class="token keyword">if</span> mode <span class="token operator">==</span> <span class="token string">"모두 추출"</span><span class="token punctuation">:</span>
        extracted_content <span class="token operator">=</span> <span class="token string">"\n\n"</span><span class="token punctuation">.</span>join<span class="token punctuation">(</span>matches_list<span class="token punctuation">)</span>
    <span class="token keyword">elif</span> mode <span class="token operator">==</span> <span class="token string">"특정 번째 추출"</span><span class="token punctuation">:</span>
        <span class="token keyword">if</span> <span class="token keyword">not</span> occurrence<span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">"추출할 Occurrence을 입력해주세요."</span><span class="token punctuation">,</span> <span class="token boolean">None</span>
        <span class="token keyword">try</span><span class="token punctuation">:</span>
            index <span class="token operator">=</span> <span class="token builtin">int</span><span class="token punctuation">(</span>occurrence<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span>
            <span class="token keyword">if</span> index <span class="token operator">&lt;</span> <span class="token number">0</span> <span class="token keyword">or</span> index <span class="token operator">&gt;=</span> <span class="token builtin">len</span><span class="token punctuation">(</span>matches_list<span class="token punctuation">)</span><span class="token punctuation">:</span>
                <span class="token keyword">return</span> <span class="token string-interpolation"><span class="token string">f"입력한 occurrence(</span><span class="token interpolation"><span class="token punctuation">{</span>occurrence<span class="token punctuation">}</span></span><span class="token string">)가 범위를 벗어났습니다. 총 </span><span class="token interpolation"><span class="token punctuation">{</span><span class="token builtin">len</span><span class="token punctuation">(</span>matches_list<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token string">개의 매치가 있습니다."</span></span><span class="token punctuation">,</span> <span class="token boolean">None</span>
            extracted_content <span class="token operator">=</span> matches_list<span class="token punctuation">[</span>index<span class="token punctuation">]</span>
        <span class="token keyword">except</span> ValueError<span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">"Occurrence은 숫자여야 합니다."</span><span class="token punctuation">,</span> <span class="token boolean">None</span>
    <span class="token keyword">elif</span> mode <span class="token operator">==</span> <span class="token string">"무효 처리"</span><span class="token punctuation">:</span>
        <span class="token keyword">if</span> <span class="token builtin">len</span><span class="token punctuation">(</span>matches_list<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">1</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string-interpolation"><span class="token string">f"패턴이 여러 번 발견되었습니다 (</span><span class="token interpolation"><span class="token punctuation">{</span><span class="token builtin">len</span><span class="token punctuation">(</span>matches_list<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token string">회). 무효로 처리됩니다."</span></span><span class="token punctuation">,</span> <span class="token boolean">None</span>
        extracted_content <span class="token operator">=</span> matches_list<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
    <span class="token keyword">else</span><span class="token punctuation">:</span>
        <span class="token keyword">return</span> <span class="token string">"유효하지 않은 처리 모드입니다."</span><span class="token punctuation">,</span> <span class="token boolean">None</span>

    <span class="token comment"># FORMAT HTML 기능 구현</span>
    <span class="token keyword">if</span> format_html<span class="token punctuation">:</span>
        <span class="token keyword">try</span><span class="token punctuation">:</span>
            soup <span class="token operator">=</span> BeautifulSoup<span class="token punctuation">(</span>extracted_content<span class="token punctuation">,</span> <span class="token string">'html5lib'</span><span class="token punctuation">)</span>
            extracted_content <span class="token operator">=</span> soup<span class="token punctuation">.</span>prettify<span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">except</span> Exception <span class="token keyword">as</span> e<span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string-interpolation"><span class="token string">f"HTML을 포맷하는 중 오류가 발생했습니다: </span><span class="token interpolation"><span class="token punctuation">{</span>e<span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">,</span> <span class="token boolean">None</span>

    <span class="token keyword">try</span><span class="token punctuation">:</span>
        <span class="token keyword">with</span> tempfile<span class="token punctuation">.</span>NamedTemporaryFile<span class="token punctuation">(</span>delete<span class="token operator">=</span><span class="token boolean">False</span><span class="token punctuation">,</span> suffix<span class="token operator">=</span><span class="token string">".html"</span><span class="token punctuation">,</span> mode<span class="token operator">=</span><span class="token string">'w'</span><span class="token punctuation">,</span> encoding<span class="token operator">=</span><span class="token string">'utf-8'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> temp_file<span class="token punctuation">:</span>
            temp_file<span class="token punctuation">.</span>write<span class="token punctuation">(</span>extracted_content<span class="token punctuation">)</span>
            temp_file_path <span class="token operator">=</span> temp_file<span class="token punctuation">.</span>name
    <span class="token keyword">except</span> Exception <span class="token keyword">as</span> e<span class="token punctuation">:</span>
        <span class="token keyword">return</span> <span class="token string-interpolation"><span class="token string">f"임시 파일을 생성하는 중 오류가 발생했습니다: </span><span class="token interpolation"><span class="token punctuation">{</span>e<span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">,</span> <span class="token boolean">None</span>

    <span class="token keyword">return</span> <span class="token boolean">None</span><span class="token punctuation">,</span> temp_file_path

<span class="token keyword">def</span> <span class="token function">toggle_occurrence_visibility</span><span class="token punctuation">(</span>mode<span class="token punctuation">)</span><span class="token punctuation">:</span>
    <span class="token keyword">return</span> gr<span class="token punctuation">.</span>update<span class="token punctuation">(</span>visible<span class="token operator">=</span><span class="token punctuation">(</span>mode <span class="token operator">==</span> <span class="token string">"특정 번째 추출"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token keyword">with</span> gr<span class="token punctuation">.</span>Blocks<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">as</span> demo<span class="token punctuation">:</span>
    gr<span class="token punctuation">.</span>Markdown<span class="token punctuation">(</span><span class="token string">"# 파일에서 특정 부분 추출 및 다운로드"</span><span class="token punctuation">)</span>
    gr<span class="token punctuation">.</span>Markdown<span class="token punctuation">(</span><span class="token triple-quoted-string string">"""
    이 앱을 사용하면 업로드한 MHT 또는 HTML 파일에서 특정 패턴에 맞는 부분을 추출하여 다운로드할 수 있습니다.
    """</span><span class="token punctuation">)</span>

    <span class="token keyword">with</span> gr<span class="token punctuation">.</span>Row<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
        <span class="token keyword">with</span> gr<span class="token punctuation">.</span>Column<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
            file_input <span class="token operator">=</span> gr<span class="token punctuation">.</span>File<span class="token punctuation">(</span>
                label<span class="token operator">=</span><span class="token string">"파일 업로드"</span><span class="token punctuation">,</span>
                file_types<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"html"</span><span class="token punctuation">,</span> <span class="token string">"mht"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                <span class="token builtin">type</span><span class="token operator">=</span><span class="token string">"binary"</span>  <span class="token comment"># 'binary'로 수정</span>
            <span class="token punctuation">)</span>
            start_input <span class="token operator">=</span> gr<span class="token punctuation">.</span>Textbox<span class="token punctuation">(</span>
                label<span class="token operator">=</span><span class="token string">"시작 패턴"</span><span class="token punctuation">,</span>
                value<span class="token operator">=</span><span class="token string">"&lt;!DOCTYPE html&gt;"</span><span class="token punctuation">,</span>
                placeholder<span class="token operator">=</span><span class="token string">"시작 부분을 지정하세요 (예: &lt;!DOCTYPE html&gt;)"</span>
            <span class="token punctuation">)</span>
            end_input <span class="token operator">=</span> gr<span class="token punctuation">.</span>Textbox<span class="token punctuation">(</span>
                label<span class="token operator">=</span><span class="token string">"끝 패턴"</span><span class="token punctuation">,</span>
                value<span class="token operator">=</span><span class="token string">"&lt;/html&gt;"</span><span class="token punctuation">,</span>
                placeholder<span class="token operator">=</span><span class="token string">"끝 부분을 지정하세요 (예: &lt;/html&gt;)"</span>
            <span class="token punctuation">)</span>
            mode_dropdown <span class="token operator">=</span> gr<span class="token punctuation">.</span>Dropdown<span class="token punctuation">(</span>
                label<span class="token operator">=</span><span class="token string">"매치 처리 방식"</span><span class="token punctuation">,</span>
                choices<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"무효 처리"</span><span class="token punctuation">,</span> <span class="token string">"모두 추출"</span><span class="token punctuation">,</span> <span class="token string">"특정 번째 추출"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                value<span class="token operator">=</span><span class="token string">"무효 처리"</span>
            <span class="token punctuation">)</span>
            occurrence_input <span class="token operator">=</span> gr<span class="token punctuation">.</span>Textbox<span class="token punctuation">(</span>
                label<span class="token operator">=</span><span class="token string">"추출할 Occurrence 번호 (mode가 '특정 번째 추출'일 때)"</span><span class="token punctuation">,</span>
                placeholder<span class="token operator">=</span><span class="token string">"예: 1"</span><span class="token punctuation">,</span>
                visible<span class="token operator">=</span><span class="token boolean">False</span>
            <span class="token punctuation">)</span>
            format_html_checkbox <span class="token operator">=</span> gr<span class="token punctuation">.</span>Checkbox<span class="token punctuation">(</span>
                label<span class="token operator">=</span><span class="token string">"FORMAT HTML"</span><span class="token punctuation">,</span>
                value<span class="token operator">=</span><span class="token boolean">False</span>
            <span class="token punctuation">)</span>
            extract_button <span class="token operator">=</span> gr<span class="token punctuation">.</span>Button<span class="token punctuation">(</span><span class="token string">"부분 추출 및 다운로드"</span><span class="token punctuation">)</span>

        <span class="token keyword">with</span> gr<span class="token punctuation">.</span>Column<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
            output_message <span class="token operator">=</span> gr<span class="token punctuation">.</span>Markdown<span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span>
            download_output <span class="token operator">=</span> gr<span class="token punctuation">.</span>File<span class="token punctuation">(</span>label<span class="token operator">=</span><span class="token string">"추출된 파일 다운로드"</span><span class="token punctuation">)</span>

    mode_dropdown<span class="token punctuation">.</span>change<span class="token punctuation">(</span>
        fn<span class="token operator">=</span>toggle_occurrence_visibility<span class="token punctuation">,</span>
        inputs<span class="token operator">=</span>mode_dropdown<span class="token punctuation">,</span>
        outputs<span class="token operator">=</span>occurrence_input
    <span class="token punctuation">)</span>

    extract_button<span class="token punctuation">.</span>click<span class="token punctuation">(</span>
        fn<span class="token operator">=</span>extract_html_from_mht<span class="token punctuation">,</span>
        inputs<span class="token operator">=</span><span class="token punctuation">[</span>file_input<span class="token punctuation">,</span> start_input<span class="token punctuation">,</span> end_input<span class="token punctuation">,</span> mode_dropdown<span class="token punctuation">,</span> occurrence_input<span class="token punctuation">,</span> format_html_checkbox<span class="token punctuation">]</span><span class="token punctuation">,</span>
        outputs<span class="token operator">=</span><span class="token punctuation">[</span>output_message<span class="token punctuation">,</span> download_output<span class="token punctuation">]</span>
    <span class="token punctuation">)</span>

    demo<span class="token punctuation">.</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div>
<hr>
<h3>6. <strong>테스트</strong></h3>
<p>변경 사항을 적용한 후, 로컬 또는 Hugging Face Spaces에서 앱을 실행하여 기능이 정상적으로 동작하는지 확인하세요.</p>
<hr>
<h3>추가 설명:</h3>
<ul>
<li><p><strong>BeautifulSoup와 html5lib</strong>: <code>html5lib</code> 파서를 사용하면 BeautifulSoup이 더 다양한 HTML 오류를 자동으로 수정할 수 있습니다. 이는 누락된 태그나 잘못된 태그 구조를 가진 HTML을 처리할 때 유용합니다.</p>
</li>
<li><p><strong><code>soup.prettify()</code></strong>: 이 메소드는 HTML을 보기 좋게 들여쓰기와 줄 바꿈을 추가하여 포맷팅합니다.</p>
</li>
<li><p><strong>오류 처리</strong>: HTML 포맷팅 중 발생할 수 있는 예외를 처리하기 위해 <code>try-except</code> 블록을 추가했습니다.</p>
</li>
<li><p><strong><code>requirements.txt</code> 확인</strong>: Hugging Face Spaces에서 앱을 실행할 때 필요한 모든 라이브러리가 <code>requirements.txt</code>에 포함되어 있는지 확인하세요.</p>
</li>
</ul>
<hr>
<p>이렇게 수정하면 사용자가 "FORMAT HTML" 체크박스를 선택할 경우, 업로드한 파일에서 추출된 HTML 부분이 자동으로 포맷팅되어 다운로드됩니다.</p>
<p>궁금한 점이 있거나 추가 도움이 필요하시면 언제든지 말씀해주세요!</p>
</span></button> </div></div></div>  </div></div></div></div><div class="form svelte-sfqy0y" style="flex-grow: 0; min-width: min(0px, 100%);"><div id="component-5" class="block svelte-12cmxck padded" style="border-style: solid; overflow: hidden; min-width: min(160px, 100%); border-width: var(--block-border-width);"><div class="wrap default full svelte-au1olv hide" style="position: absolute; padding: 0px;"></div> <label class="svelte-1f354aw container"><span data-testid="block-info" class="svelte-1gfkn6j">Type an input and press Enter</span>   <textarea data-testid="textbox" class="scroll-hide svelte-1f354aw" dir="ltr" placeholder="Hi there!" rows="1" style="overflow-y: scroll; height: 42px;"></textarea></label></div></div><div id="component-7" class="svelte-sa48pu stretch"> <div id="component-8" class="svelte-vt1mxs gap" style="flex-grow: 7; min-width: min(320px, 100%);"> <button class="lg secondary  svelte-cmf5ev" id="component-9"> Run</button></div><div id="component-10" class="svelte-vt1mxs gap" style="flex-grow: 3; min-width: min(320px, 100%);"> <div class="form svelte-sfqy0y" style="flex-grow: 0; min-width: min(0px, 100%);"><div id="component-11" class="block svelte-12cmxck padded" style="border-style: solid; overflow: hidden; min-width: min(160px, 100%); border-width: var(--block-border-width);"><div class="wrap default full svelte-au1olv hide" style="position: absolute; padding: 0px;"></div> <label class="svelte-1f354aw container"><span data-testid="block-info" class="svelte-1gfkn6j">Status code from OpenAI server</span>   <textarea data-testid="textbox" class="scroll-hide svelte-1f354aw" dir="ltr" placeholder="" rows="1" disabled="" style="overflow-y: scroll; height: 42px;"></textarea></label></div></div></div></div><div id="component-13" class="block svelte-12cmxck padded" style="border-style: solid; overflow: visible; min-width: min(0px, 100%); border-width: var(--block-border-width);"><div class="wrap default full svelte-au1olv hide" style="position: absolute; padding: 0px;"></div> <button class="label-wrap svelte-1w6vloh"><span class="svelte-1w6vloh">Parameters</span> <span class="icon svelte-1w6vloh" style="transform: rotate(90deg);">▼</span></button> <div style="display: none;"><div id="" class="svelte-vt1mxs gap" style="min-width: min(0px, 100%);"> <div class="form svelte-sfqy0y" style="flex-grow: 0; min-width: min(0px, 100%);"><div id="component-14" class="block svelte-12cmxck padded" style="border-style: solid; overflow: visible; min-width: min(160px, 100%); border-width: var(--block-border-width);"><div class="wrap default full svelte-au1olv hide" style="position: absolute; padding: 0px;"></div> <div class="wrap svelte-pc1gm4"><div class="head svelte-pc1gm4"><label for="range_id_0"><span data-testid="block-info" class="svelte-1gfkn6j">Top-p (nucleus sampling)</span> </label> <input aria-label="number input for Top-p (nucleus sampling)" data-testid="number-input" type="number" min="0" max="1" step="0.05" class="svelte-pc1gm4"></div></div> <input type="range" id="range_id_0" name="cowbell" min="0" max="1" step="0.05" aria-label="range slider for Top-p (nucleus sampling)" class="svelte-pc1gm4" style="background-size: 100% 100%;"></div><div id="component-15" class="block svelte-12cmxck padded" style="border-style: solid; overflow: visible; min-width: min(160px, 100%); border-width: var(--block-border-width);"><div class="wrap default full svelte-au1olv hide" style="position: absolute; padding: 0px;"></div> <div class="wrap svelte-pc1gm4"><div class="head svelte-pc1gm4"><label for="range_id_1"><span data-testid="block-info" class="svelte-1gfkn6j">Temperature</span> </label> <input aria-label="number input for Temperature" data-testid="number-input" type="number" min="0" max="5" step="0.1" class="svelte-pc1gm4"></div></div> <input type="range" id="range_id_1" name="cowbell" min="0" max="5" step="0.1" aria-label="range slider for Temperature" class="svelte-pc1gm4" style="background-size: 20% 100%;"></div><div id="component-16" class="block svelte-12cmxck hidden padded" style="border-style: solid; overflow: hidden; min-width: min(160px, 100%); border-width: var(--block-border-width);"><div class="wrap default full svelte-au1olv hide" style="position: absolute; padding: 0px;"></div> <label class="block svelte-pjtc3 container"><span data-testid="block-info" class="svelte-1gfkn6j">Number</span>  <input aria-label="Number" type="number" step="1" class="svelte-pjtc3"></label></div></div></div></div></div></div><div id="user_consent_container" class="svelte-vt1mxs gap hide" style="flex-grow: 1; min-width: min(320px, 100%);"> <div class="form svelte-sfqy0y hidden" style="flex-grow: 0; min-width: min(0px, 100%);"><div id="component-20" class="block svelte-12cmxck hidden padded" style="border-style: solid; overflow: visible; min-width: min(160px, 100%); border-width: var(--block-border-width);"><div class="wrap default full svelte-au1olv hide" style="position: absolute; padding: 0px;"></div>  <label class="svelte-3pzdsv disabled"><input disabled="" type="checkbox" name="test" data-testid="checkbox" class="svelte-3pzdsv"> <span class="ml-2 svelte-3pzdsv">Checkbox</span></label></div></div><div id="component-21" class="block svelte-12cmxck padded" style="border-style: solid; overflow: visible; min-width: min(0px, 100%); border-width: var(--block-border-width);"><div class="wrap default full svelte-au1olv hide" style="position: absolute; padding: 0px;"></div> <button class="label-wrap svelte-1w6vloh open"><span class="svelte-1w6vloh">User Consent for Data Collection, Use, and Sharing</span> <span class="icon svelte-1w6vloh" style="transform: rotate(0deg);">▼</span></button> <div style="display: block;"><div id="" class="svelte-vt1mxs gap" style="min-width: min(0px, 100%);"> <div id="component-22" class="block svelte-12cmxck padded hide-container" style="border-style: solid; overflow: visible; min-width: min(0px, 100%); border-width: var(--block-border-width);"> <div class="wrap center full svelte-au1olv hide" style="position: absolute; padding: 0px;"></div> <div class="svelte-uqf9ro"><div class="prose  svelte-1ybaih5">
            <div>
                <p>By using our app, which is powered by OpenAI's API, you acknowledge and agree to the following terms regarding the data you provide:</p>
                <ol>
                    <li><strong>Collection:</strong> We may collect information, including the inputs you type into our app, the outputs generated by OpenAI's API, and certain technical details about your device and connection (such as browser type, operating system, and IP address) provided by your device's request headers.</li>
                    <li><strong>Use:</strong> We may use the collected data for research purposes, to improve our services, and to develop new products or services, including commercial applications, and for security purposes, such as protecting against unauthorized access and attacks.</li>
                    <li><strong>Sharing and Publication:</strong> Your data, including the technical details collected from your device's request headers, may be published, shared with third parties, or used for analysis and reporting purposes.</li>
                    <li><strong>Data Retention:</strong> We may retain your data, including the technical details collected from your device's request headers, for as long as necessary.</li>
                </ol>
                <p>By continuing to use our app, you provide your explicit consent to the collection, use, and potential sharing of your data as described above. If you do not agree with our data collection, use, and sharing practices, please do not use our app.</p>
            </div>
            </div></div></div><button class="lg secondary  svelte-cmf5ev" id="component-23"> I Agree</button></div></div></div></div></div></div> <footer class="svelte-1rjryqp"><button class="show-api svelte-1rjryqp">Use via API <img src="data:image/svg+xml,%3csvg%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M26.9425%202.94265C27.4632%202.42195%2027.4632%201.57773%2026.9425%201.05703C26.4218%200.536329%2025.5776%200.536329%2025.0569%201.05703L22.5713%203.54256C21.1213%202.59333%2019.5367%202.43378%2018.1753%202.64006C16.5495%202.88638%2015.1127%203.66838%2014.3905%204.39053L12.3905%206.39053C12.1405%206.64058%2012%206.97972%2012%207.33334C12%207.68697%2012.1405%208.0261%2012.3905%208.27615L19.7239%2015.6095C20.2446%2016.1302%2021.0888%2016.1302%2021.6095%2015.6095L23.6095%2013.6095C24.3316%2012.8873%2025.1136%2011.4505%2025.36%209.82475C25.5663%208.46312%2025.4066%206.87827%2024.4571%205.42807L26.9425%202.94265Z'%20fill='%233c4555'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.276%2012.9426C12.7967%2012.4219%2012.7967%2011.5777%2012.276%2011.057C11.7553%2010.5363%2010.9111%2010.5363%2010.3904%2011.057L8.66651%2012.7809L8.27615%2012.3905C8.0261%2012.1405%207.68697%2012%207.33334%2012C6.97972%2012%206.64058%2012.1405%206.39053%2012.3905L4.39053%2014.3905C3.66838%2015.1127%202.88638%2016.5495%202.64006%2018.1753C2.43377%2019.5367%202.59333%2021.1214%203.54262%2022.5714L1.05703%2025.057C0.536329%2025.5777%200.536329%2026.4219%201.05703%2026.9426C1.57773%2027.4633%202.42195%2027.4633%202.94265%2026.9426L5.42817%2024.4571C6.87835%2025.4066%208.46315%2025.5663%209.82475%2025.36C11.4505%2025.1136%2012.8873%2024.3316%2013.6095%2023.6095L15.6095%2021.6095C16.1302%2021.0888%2016.1302%2020.2446%2015.6095%2019.7239L15.2188%2019.3332L16.9426%2017.6093C17.4633%2017.0886%2017.4633%2016.2444%2016.9426%2015.7237C16.4219%2015.203%2015.5777%2015.203%2015.057%2015.7237L13.3332%2017.4475L10.5521%2014.6665L12.276%2012.9426Z'%20fill='%23FF7C00'/%3e%3c/svg%3e" alt="logo" class="svelte-1rjryqp"></button> <div class="svelte-1rjryqp">·</div> <a href="https://gradio.app/" class="built-with svelte-1rjryqp" target="_blank" rel="noreferrer">gradio로 제작되었습니다 <img src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='576'%20height='576'%20viewBox='0%200%20576%20576'%20fill='none'%3e%3cpath%20d='M287.5%20229L86%20344.5L287.5%20460L489%20344.5L287.5%20229Z'%20stroke='url(%23paint0_linear_102_7)'%20stroke-width='59'%20stroke-linejoin='round'/%3e%3cpath%20d='M287.5%20116L86%20231.5L287.5%20347L489%20231.5L287.5%20116Z'%20stroke='url(%23paint1_linear_102_7)'%20stroke-width='59'%20stroke-linejoin='round'/%3e%3cpath%20d='M86%20344L288%20229'%20stroke='url(%23paint2_linear_102_7)'%20stroke-width='59'%20stroke-linejoin='bevel'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_102_7'%20x1='60'%20y1='341'%20x2='429.5'%20y2='344'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23F9D100'/%3e%3cstop%20offset='1'%20stop-color='%23F97700'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_102_7'%20x1='513.5'%20y1='231'%20x2='143.5'%20y2='231'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23F9D100'/%3e%3cstop%20offset='1'%20stop-color='%23F97700'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_102_7'%20x1='60'%20y1='344'%20x2='428.987'%20y2='341.811'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23F9D100'/%3e%3cstop%20offset='1'%20stop-color='%23F97700'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e" alt="logo" class="svelte-1rjryqp"></a></footer></div>   <div class="toast-wrap svelte-pu0yf1"></div></div> </div></gradio-app>
		
	
<div style="clear: both; display: block; height: 0px;"></div></body></html>