Update app.py

app.py

@@ -1,94 +1,632 @@
-<p><em>Frufru 1 Day Amane Brown </em>features a sweet and plump brown design that instantly brightens your look with a soft, flirty charm. With a colored diameter of 13.9mm, it provides noticeable yet natural enlargement for rounder, more defined eyes. The lens combines a delicate thin rim&nbsp; with a sheer brown tone, creating a fresh, radiant finish that makes your eyes pop the moment you put them on. Melo Brown delivers that ultimate irresistibly cute and subtly alluring eye look—perfect for achieving a lovable, sparkling gaze with everyday ease.</p>
-<p><span style="color: #000000;"><strong><u>Candy Magic 1 Day Contacts Information</u></strong></span></p>
-<table border="1">
-<tbody>
-<tr>
-<td><span>Product Name:</span></td>
-<td><span>Frufru 1 Day Amane Brown Contact Lenses 10 pack</span></td>
-</tr>
-<tr>
-<td><span>Water Content:</span></td>
-<td>55%</td>
-</tr>
-<tr>
-<td><span>Base Curve Radius:</span></td>
-<td>8.6mm</td>
-</tr>
-<tr>
-<td><span>Diameter:</span></td>
-<td><span>14.50 mm (</span><span>G.DIA: </span><span>13.90mm)</span></td>
-</tr>
-<tr>
-<td><span>Package:</span></td>
-<td>Each box contains 10 pieces of daily contacts with same prescription. Please order more than 1 box if you have different prescription for each eye.</td>
-</tr>
-<tr>
-<td><span>Using period:</span></td>
-<td><span>Daily</span></td>
-</tr>
-<tr>
-<td><span>Contact Lenses Prescription:</span></td>
-<td><span>Plano, -1.00D to -8.00D</span></td>
-</tr>
-<tr>
-<td><span>Price Unit:</span></td>
-<td><span>Per Box</span></td>
-</tr>
-</tbody>
-</table>
-<p>&nbsp;</p>
-<p><span style="text-decoration: underline;"><strong>About Candy Magic</strong></span><br><br><span>Candy Magic is a famous contact lense manufacturer based in Japan. As one of the </span><span>Japan</span><span> leader in eye care, </span><span>Candy Magic</span><span> develops and manufactures innovative medicines and devices to serve the full life cycle of eye care needs. The </span><span>commercial image model for </span><span>Candy Magic is the famous Japanese actor Ms. </span><span>Airi Suzuki.</span><br><br></p>
-<p><strong><u>Instructions on Frufru 1 Day Amane Brown Contact Lenses</u></strong></p>
-<p>Frufru 1 Day Amane Brown contact lenses are daily wear soft contact lenses. Daily lenses are that once a lens has been removed from the eye, it must be thrown away.</p>
-<ol>
-<li>Keep your fingernails short and smooth to avoid scratching your eye or your Frufru 1 Day Amane Brown contacts.</li>
-<li>Always wash your hands with soap and rinse carefully before handling your Frufru 1 Day Amane Brown color contact lenses. Lenses may become contaminated if you do not wash your hands properly.</li>
-<li>Always handle your Frufru 1 Day Amane Brown color contacts somewhere that is well-lit. clean and sterile.</li>
-<li>Your Frufru 1 Day Amane Brown colour contact lenses may become damaged depending on how you handle them.</li>
-</ol>
-<p><strong><u>Checking the lenses and blister pack packaging</u></strong></p>
-<ol>
-<li>Check which Frufru 1 Day Amane Brown colour contacts are for the right eye and which lenses are for the left eye.</li>
-<li>Check if there is anything wrong with the Frufru 1 Day Amane Brown colored contact lenses and blister pack packaging before opening. If there is anything wrong, for example, if there is any damage or leakage, do not open and contact the point of purchase.</li>
-</ol>
-<p><strong><u>Removing the blister pack packaging</u></strong></p>
-<ol>
-<li>Break off the blister pack packaging of the Frufru 1 Day Amane Brown colour contacts by folding down the sides.</li>
-<li>Remove the label, keeping a firm hold on the blister pack and the label. When doing this, be careful not to cut your hand on the blister pack or label. Also note that the Frufru 1 Day Amane Brown color contacts storage solution inside the blister pack may splash upon removal of the label.</li>
-<li>Remove the Frufru 1 Day Amane Brown colored contacts from the blister pack packaging by sticking the Frufru 1 Day Amane Brown color contact lenses to the pad of your index finger. Alternatively, turn the blister pack packaging upside down and empty the lens together with the storage solution into the palm of your hand. Take care, because if you dig your nail into the lens or scrape the lens on the rim of the blister pack packaging on removal, the lens may be damaged.</li>
-</ol>
-<p><strong><u>Checking the Frufru 1 Day Amane Brown Contact Lenses</u></strong></p>
-<ol>
-<li>Hold the edges of the Frufru 1 Day Amane Brown contact lenses from the side and gently move up and down to remove the liquid.</li>
-<li>Put the concave surface on the index finger of your dominant hand and check which is the right side and which is the wrong side of the Frufru 1 Day Amane Brown contacts. A lens has a right side and a wrong side.</li>
-</ol>
-<p>Ensure that the Frufru 1 Day Amane Brown color contacts is not inside out. Place the lens on your right index finger and verify the shape.</p>
-<ol start="3">
-<li>Check if there is anything wrong with the Frufru 1 Day Amane Brown colour contact lenses, for example, deformation, discolouration, foreign matter, damage, scratches and dirt, and do not wear the lens if there is anything wrong with it.</li>
-</ol>
-<p><strong><u>Inserting Frufru 1 Day Amane Brown Contact Lenses</u></strong></p>
-<ol>
-<li>Put the Frufru 1 Day Amane Brown contact lenses onto your finger, and, with the middle finger of the same hand, pull down your lower eyelid. With the index finger of your other hand, pull up your top eyelid. If you put your finger on your eyelash line, you can open your eyes wide.</li>
-<li>Look in the mirror so that your cornea comes into the center of your eye. Slowly bring the Frufru 1 Day Amane Brown colour contact lenses close to your eye and put it gently in place, still looking in the mirror. If you glance upwards when doing this, the lens will not be properly centered on your cornea.</li>
-<li>When you have placed the Frufru 1 Day Amane Brown colour contacts properly on the cornea, slowly remove your index finger and then remove your fingers which had been holding your eyelids, starting with the bottom lid first and then the top lid. If you remove your fingers quickly and blink your eye shut. the lens may change position or fall out.</li>
-<li>Check in the mirror that the Frufru 1 Day Amane Brown colored contact lenses is on top of your cornea and, covering the opposite eye with your hand, check your sight in your right and left eyes.</li>
-<li>Follow the same procedure to fit the Frufru 1 Day Amane Brown colored contacts in your other eye.</li>
-</ol>
-<p><strong><u>Removing the Frufru 1 Day Amane Brown Contact Lenses</u></strong></p>
-<ol>
-<li>Check the position of the Frufru 1 Day Amane Brown contact lenses in the mirror.</li>
-<li>Looking straight in the mirror, hold the mirror upward and look at the eye reflected in the mirror.</li>
-<li>With your middle finger, slowly pull your lower lid down, and with the index finger of the same hand, move the Frufru 1 Day Amane Brown contacts down from the cornea.</li>
-<li>In this position, use the pads of your thumb and index finger to gently take hold of the bottom of the Frufru 1 Day Amane Brown color contact lenses.</li>
-</ol>
-<p>To avoid scratching your eye, take care not to touch your eye directly with the tips of your fingers or your fingernails.</p>
-<p>If you are unable to remove the Frufru 1 Day Amane Brown colored contact lenses, blink several times and then try again.</p>
-<p><strong><u>Safety usage of Frufru 1 Day Amane Brown Contact Lenses</u></strong></p>
-<p>If you have inadvertently worn a Frufru 1 Day Amane Brown colored contacts which is damaged or otherwise faulty, or if a lens becomes damaged while you are wearing it, remove the lens immediately and consult your eye care practitioner immediately, regardless of whether you have any subjective symptoms.</p>
-<p>Until you are used to your lenses, you may experience symptoms such as slight discomfort, slightly bloodshot eyes, unstable vision, watering eyes or itchy eyes. Symptoms vary from person to person but will gradually diminish as you become used to your lenses. However, if you experience acute symptoms or if symptoms persist, stop wearing your Frufru 1 Day Amane Brown contact lenses and promptly consult your eye care practitioner.</p>
-<p>&nbsp;</p>
-<div style="text-align: start;"><img src="https://cdn.shopify.com/s/files/1/0553/1962/5919/files/candy-magic-1-day-melo-brown-blue-light-barrier-contact-lenses-10-pack-1_480x480.jpg?v=1770918126" alt="Frufru 1 Day Amane Brown blue light cut contact lenses 13.9mm colored diameter natural brown" style="float: none;"></div>
-<div style="text-align: start;"><img src="https://cdn.shopify.com/s/files/1/0553/1962/5919/files/Candy-magic-1-day-melo-brown-blue-light-barrier-contact-lenses-10-pack-3_480x480.jpg?v=1770918126" alt="Frufru 1 Day Amane Brown model wearing daily brown contact lenses natural enlargement effect" style="float: none;"></div>
-<div style="text-align: start;"><img src="https://cdn.shopify.com/s/files/1/0553/1962/5919/files/Candy-magic-1-day-melo-brown-blue-light-barrier-contact-lenses-10-pack-4_480x480.jpg?v=1770918126" alt="Frufru 1 Day Amane Brown comparison clear lens vs wearing effect 13.9mm color diameter" style="float: none;"></div>
-<div style="text-align: start;"><img src="https://cdn.shopify.com/s/files/1/0553/1962/5919/files/Candy-magic-1-day-melo-brown-blue-light-barrier-contact-lenses-10-pack-5_480x480.jpg?v=1770918126" alt="Frufru 1 Day Amane Brown upgraded blue light barrier contact lenses new transparent design" style="float: none;"></div>
-<p><iframe class="video" src="https://www.youtube.com/embed/eGZCCIDHIuo"></iframe></p>
+import re
+
+import gradio as gr
+
+
+def replace_first(
+    text: str,
+    find_text: str,
+    replace_text: str,
+    case_sensitive: bool,
+) -> tuple[str, str]:
+    text = text or ""
+
+    if not find_text:
+        return text, "Enter text to find."
+
+    if case_sensitive:
+        position = text.find(find_text)
+
+        if position == -1:
+            return text, "Cannot find the specified text."
+
+        updated_text = (
+            text[:position]
+            + replace_text
+            + text[position + len(find_text):]
+        )
+    else:
+        pattern = re.compile(re.escape(find_text), re.IGNORECASE)
+        match = pattern.search(text)
+
+        if not match:
+            return text, "Cannot find the specified text."
+
+        updated_text = (
+            text[:match.start()]
+            + replace_text
+            + text[match.end():]
+        )
+
+    return updated_text, "Replaced the first match."
+
+
+def replace_all(
+    text: str,
+    find_text: str,
+    replace_text: str,
+    case_sensitive: bool,
+) -> tuple[str, str]:
+    text = text or ""
+
+    if not find_text:
+        return text, "Enter text to find."
+
+    if case_sensitive:
+        match_count = text.count(find_text)
+
+        if match_count == 0:
+            return text, "Cannot find the specified text."
+
+        updated_text = text.replace(find_text, replace_text)
+    else:
+        pattern = re.compile(re.escape(find_text), re.IGNORECASE)
+        match_count = len(pattern.findall(text))
+
+        if match_count == 0:
+            return text, "Cannot find the specified text."
+
+        updated_text = pattern.sub(lambda _: replace_text, text)
+
+    word = "match" if match_count == 1 else "matches"
+
+    return updated_text, f"Replaced {match_count} {word}."
+
+
+def clear_editor() -> tuple[str, str, str, str]:
+    return "", "", "", "Editor cleared."
+
+
+CSS = """
+.gradio-container {
+    max-width: none !important;
+    width: 99% !important;
+    margin: 0 auto !important;
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+}
+
+#main-layout {
+    gap: 14px !important;
+}
+
+#editor-column {
+    min-width: 0 !important;
+}
+
+#main-editor textarea {
+    min-height: 760px !important;
+    height: 82vh !important;
+    resize: vertical !important;
+
+    font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        Monaco,
+        Consolas,
+        "Liberation Mono",
+        monospace !important;
+
+    font-size: 16px !important;
+    line-height: 1.55 !important;
+    white-space: pre-wrap !important;
+    tab-size: 4 !important;
+}
+
+#side-panel {
+    min-width: 260px !important;
+    max-width: 290px !important;
+}
+
+#side-panel button {
+    min-height: 42px !important;
+}
+
+#status-box textarea {
+    min-height: 70px !important;
+}
+
+@media (max-width: 900px) {
+    #side-panel {
+        max-width: none !important;
+    }
+
+    #main-editor textarea {
+        height: 65vh !important;
+    }
+}
+"""
+
+
+HEAD = """
+<script>
+let lastFindText = "";
+let lastCaseSensitive = false;
+let lastMatchEnd = 0;
+
+function getEditor() {
+    return document.querySelector("#main-editor textarea");
+}
+
+function getFindInput() {
+    return document.querySelector("#find-input textarea");
+}
+
+function getCaseSensitiveCheckbox() {
+    return document.querySelector(
+        "#case-sensitive input[type='checkbox']"
+    );
+}
+
+function setStatus(message) {
+    const statusBox = document.querySelector("#status-box textarea");
+
+    if (!statusBox) {
+        return;
+    }
+
+    const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        "value"
+    ).set;
+
+    nativeSetter.call(statusBox, message);
+    statusBox.dispatchEvent(
+        new Event("input", {
+            bubbles: true
+        })
+    );
+}
+
+function resetFindPosition() {
+    lastFindText = "";
+    lastMatchEnd = 0;
+}
+
+function findNext() {
+    const editor = getEditor();
+    const findInput = getFindInput();
+    const caseCheckbox = getCaseSensitiveCheckbox();
+
+    if (!editor || !findInput) {
+        return;
+    }
+
+    const originalText = editor.value || "";
+    const findText = findInput.value || "";
+    const caseSensitive = caseCheckbox
+        ? caseCheckbox.checked
+        : false;
+
+    if (!findText) {
+        setStatus("Enter text to find.");
+        findInput.focus();
+        return;
+    }
+
+    const searchText = caseSensitive
+        ? originalText
+        : originalText.toLowerCase();
+
+    const searchTerm = caseSensitive
+        ? findText
+        : findText.toLowerCase();
+
+    /*
+    When the search term or case-sensitive option changes,
+    begin from the editor's current cursor position.
+    */
+    if (
+        findText !== lastFindText ||
+        caseSensitive !== lastCaseSensitive
+    ) {
+        lastFindText = findText;
+        lastCaseSensitive = caseSensitive;
+        lastMatchEnd = editor.selectionEnd || 0;
+    } else {
+        /*
+        Continue after the currently selected match.
+        */
+        lastMatchEnd = editor.selectionEnd || lastMatchEnd;
+    }
+
+    let position = searchText.indexOf(
+        searchTerm,
+        lastMatchEnd
+    );
+
+    let wrapped = false;
+
+    /*
+    Like Notepad, return to the beginning when the end
+    of the text is reached.
+    */
+    if (position === -1 && lastMatchEnd > 0) {
+        position = searchText.indexOf(searchTerm, 0);
+        wrapped = position !== -1;
+    }
+
+    if (position === -1) {
+        setStatus(
+            'Cannot find "' + findText + '".'
+        );
+        return;
+    }
+
+    const matchEnd = position + findText.length;
+
+    editor.focus();
+    editor.setSelectionRange(position, matchEnd);
+
+    lastMatchEnd = matchEnd;
+
+    /*
+    Scroll the selected match into view. A temporary hidden
+    mirror element is used to estimate the vertical position.
+    */
+    scrollSelectionIntoView(
+        editor,
+        position,
+        matchEnd
+    );
+
+    if (wrapped) {
+        setStatus(
+            "Reached the end. Continued from the beginning."
+        );
+    } else {
+        setStatus(
+            "Match found at character " + (position + 1) + "."
+        );
+    }
+}
+
+function scrollSelectionIntoView(
+    textarea,
+    selectionStart,
+    selectionEnd
+) {
+    const mirror = document.createElement("div");
+    const style = window.getComputedStyle(textarea);
+
+    const copiedProperties = [
+        "boxSizing",
+        "width",
+        "height",
+        "overflowX",
+        "overflowY",
+        "borderTopWidth",
+        "borderRightWidth",
+        "borderBottomWidth",
+        "borderLeftWidth",
+        "paddingTop",
+        "paddingRight",
+        "paddingBottom",
+        "paddingLeft",
+        "fontStyle",
+        "fontVariant",
+        "fontWeight",
+        "fontStretch",
+        "fontSize",
+        "fontSizeAdjust",
+        "lineHeight",
+        "fontFamily",
+        "textAlign",
+        "textTransform",
+        "textIndent",
+        "textDecoration",
+        "letterSpacing",
+        "wordSpacing",
+        "tabSize"
+    ];
+
+    copiedProperties.forEach((property) => {
+        mirror.style[property] = style[property];
+    });
+
+    mirror.style.position = "absolute";
+    mirror.style.visibility = "hidden";
+    mirror.style.whiteSpace = "pre-wrap";
+    mirror.style.wordWrap = "break-word";
+    mirror.style.top = "0";
+    mirror.style.left = "-9999px";
+    mirror.style.height = "auto";
+
+    const textBeforeMatch = textarea.value.substring(
+        0,
+        selectionStart
+    );
+
+    mirror.textContent = textBeforeMatch;
+
+    const marker = document.createElement("span");
+    marker.textContent =
+        textarea.value.substring(
+            selectionStart,
+            selectionEnd
+        ) || ".";
+
+    mirror.appendChild(marker);
+    document.body.appendChild(mirror);
+
+    const targetTop = marker.offsetTop;
+    const visibleTop = textarea.scrollTop;
+    const visibleBottom =
+        textarea.scrollTop + textarea.clientHeight;
+
+    if (
+        targetTop < visibleTop ||
+        targetTop > visibleBottom - 40
+    ) {
+        textarea.scrollTop = Math.max(
+            0,
+            targetTop - textarea.clientHeight / 2
+        );
+    }
+
+    document.body.removeChild(mirror);
+}
+
+/*
+Keyboard shortcuts:
+
+F3              Find next
+Enter           Find next while Find box is focused
+Ctrl/Cmd + F    Focus the Find box
+Escape          Return focus to the editor
+*/
+document.addEventListener("keydown", function(event) {
+    const findInput = getFindInput();
+    const editor = getEditor();
+
+    if (event.key === "F3") {
+        event.preventDefault();
+        findNext();
+        return;
+    }
+
+    if (
+        (event.ctrlKey || event.metaKey) &&
+        event.key.toLowerCase() === "f"
+    ) {
+        event.preventDefault();
+
+        if (findInput) {
+            findInput.focus();
+            findInput.select();
+        }
+
+        return;
+    }
+
+    if (
+        event.key === "Enter" &&
+        document.activeElement === findInput
+    ) {
+        event.preventDefault();
+        findNext();
+        return;
+    }
+
+    if (event.key === "Escape" && editor) {
+        editor.focus();
+    }
+});
+
+/*
+Reset search continuation when the search text changes.
+*/
+document.addEventListener("input", function(event) {
+    if (
+        event.target === getFindInput() ||
+        event.target === getEditor()
+    ) {
+        resetFindPosition();
+    }
+});
+
+/*
+Expose the function so the Gradio button can call it.
+*/
+window.findNext = findNext;
+</script>
+"""
+
+
+with gr.Blocks(
+    title="Plain Text Editor",
+    css=CSS,
+    head=HEAD,
+) as demo:
+    gr.Markdown("# Plain Text Editor")
+
+    with gr.Row(
+        equal_height=False,
+        elem_id="main-layout",
+    ):
+        with gr.Column(
+            scale=10,
+            min_width=700,
+            elem_id="editor-column",
+        ):
+            editor = gr.Textbox(
+                label="Text",
+                placeholder="Type or paste your plain text here...",
+                lines=30,
+                max_lines=3000,
+                elem_id="main-editor",
+                buttons=["copy"],
+                autofocus=True,
+            )
+
+        with gr.Column(
+            scale=2,
+            min_width=260,
+            elem_id="side-panel",
+        ):
+            paste_button = gr.Button(
+                "Paste",
+                variant="primary",
+            )
+
+            clear_button = gr.Button(
+                "Clear Text",
+                variant="stop",
+            )
+
+            gr.Markdown("### Find and Replace")
+
+            find_input = gr.Textbox(
+                label="Find",
+                placeholder="Text to find",
+                lines=1,
+                elem_id="find-input",
+            )
+
+            find_next_button = gr.Button(
+                "Find Next  (F3)",
+                variant="primary",
+            )
+
+            replace_input = gr.Textbox(
+                label="Replace with",
+                placeholder="Replacement text",
+                lines=1,
+            )
+
+            case_sensitive = gr.Checkbox(
+                label="Match case",
+                value=False,
+                elem_id="case-sensitive",
+            )
+
+            replace_first_button = gr.Button(
+                "Replace First"
+            )
+
+            replace_all_button = gr.Button(
+                "Replace All"
+            )
+
+            status = gr.Textbox(
+                label="Status",
+                value="Ready.",
+                interactive=False,
+                elem_id="status-box",
+            )
+
+    paste_button.click(
+        fn=None,
+        inputs=None,
+        outputs=editor,
+        js="""
+        async () => {
+            const editor = document.querySelector(
+                "#main-editor textarea"
+            );
+
+            if (!editor) {
+                return "";
+            }
+
+            try {
+                const clipboardText =
+                    await navigator.clipboard.readText();
+
+                const currentText = editor.value || "";
+                const start =
+                    editor.selectionStart ?? currentText.length;
+                const end =
+                    editor.selectionEnd ?? currentText.length;
+
+                const updatedText =
+                    currentText.slice(0, start) +
+                    clipboardText +
+                    currentText.slice(end);
+
+                setTimeout(() => {
+                    const updatedEditor =
+                        document.querySelector(
+                            "#main-editor textarea"
+                        );
+
+                    if (updatedEditor) {
+                        const newCursor =
+                            start + clipboardText.length;
+
+                        updatedEditor.focus();
+                        updatedEditor.setSelectionRange(
+                            newCursor,
+                            newCursor
+                        );
+                    }
+                }, 100);
+
+                return updatedText;
+            } catch (error) {
+                alert(
+                    "Clipboard access was blocked. " +
+                    "Please allow clipboard permission, " +
+                    "or use Ctrl+V / Cmd+V."
+                );
+
+                return editor.value || "";
+            }
+        }
+        """,
+    )
+
+    find_next_button.click(
+        fn=None,
+        inputs=None,
+        outputs=None,
+        js="""
+        () => {
+            window.findNext();
+        }
+        """,
+    )
+
+    replace_first_button.click(
+        fn=replace_first,
+        inputs=[
+            editor,
+            find_input,
+            replace_input,
+            case_sensitive,
+        ],
+        outputs=[
+            editor,
+            status,
+        ],
+    )
+
+    replace_all_button.click(
+        fn=replace_all,
+        inputs=[
+            editor,
+            find_input,
+            replace_input,
+            case_sensitive,
+        ],
+        outputs=[
+            editor,
+            status,
+        ],
+    )
+
+    clear_button.click(
+        fn=clear_editor,
+        inputs=None,
+        outputs=[
+            editor,
+            find_input,
+            replace_input,
+            status,
+        ],
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()