Upload 48 files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+media/cover.png filter=lfs diff=lfs merge=lfs -text
+media/github.mp4 filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,17 @@
+FROM node:18 as builder
+
+WORKDIR /usr/src/app
+
+# Copy the package.json and package-lock.json files over
+# We do this FIRST so that we don't copy the huge node_modules folder over from our local machine
+# The node_modules can contain machine-specific libraries, so it should be created by the machine that's actually running the code
+COPY . ./
+
+# Now we run NPM install, which includes dev dependencies
+RUN npm install
+
+FROM alpine:latest as production
+RUN apk --no-cache add nodejs ca-certificates
+WORKDIR /root/
+COPY --from=builder /usr/src/app ./
+CMD [ "node", "node_modules/vite/bin/vite.js", "--host" ]

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"
+    />
+    <title>Inpaint-web</title>
+
+  </head>
+  <body class="h-screen">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root" class="h-full"></div>
+  
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+
+</html>

media/github.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8753cc51e46d3198d9023f7b5f197b28708a9dd1d1eb73d6d8a1d7cf43c788c6
+size 1657419

messages/en.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"drop_zone": "Click or drag here",
+	"try_it_images": "Try it:",
+	"feedback": "About me",
+	"start_new": "Start new",
+	"bruch_size": "Brush Size",
+	"original": "Original",
+	"upscale": "4x-upscaling",
+	"download": "Download",
+	"undo": "Undo",
+	"inpaint_model_download_message": "Need to download a 30MB model file, please wait patiently...",
+	"upscaleing_model_download_message": "Need to download a 70MB model file, please wait patiently..."
+}

messages/zh.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"drop_zone": "点击 或者 拖拽到这里",
+	"try_it_images": "试一试:",
+	"feedback": "联系作者",
+	"start_new": "开始新的",
+	"bruch_size": "刷子大小",
+	"original": "原图",
+	"upscale": "4 倍放大",
+	"download": "下载",
+	"undo": "撤销",
+	"inpaint_model_download_message": "注意需要连接国际互联网，需要下载一次30MB大小模型文件,耐心等待。。。",
+	"upscaleing_model_download_message": "注意需要连接国际互联网，需要下载一次70MB大小模型文件,耐心等待。。。"
+}

package.json

@@ -0,0 +1,85 @@
+{
+  "name": "inpaint-web",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@heroicons/react": "^1.0.4",
+    "@inlang/paraglide-js-adapter-vite": "^1.0.2",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "localforage": "^1.10.0",
+    "opencv-ts": "^1.3.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-use": "^17.3.1",
+    "react-zoom-pan-pinch": "^3.3.0",
+    "vite": "^5.0.2",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.2.1"
+  },
+  "scripts": {
+    "start": "vite --host",
+    "fast-build": "vite build",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "prepare": "husky install",
+    "format": "prettier --write .",
+    "postinstall": "paraglide-js compile --project ./project.inlang",
+    "paraglide": "paraglide-js compile --project ./project.inlang"
+  },
+  "lint-staged": {
+    "*.{vue,js,ts,jsx,tsx,css,sass,scss,md}": [
+      "prettier --write",
+      "echo '统一格式化完成🌸'"
+    ]
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@inlang/paraglide-js": "1.0.0-prerelease.19",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.0.2",
+    "@types/node": "^18.0.0",
+    "@types/react": "^17.0.30",
+    "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
+    "@vitest/coverage-v8": "^0.34.6",
+    "autoprefixer": "^10.4.16",
+    "cross-env": "7.x",
+    "delay-cli": "^1.1.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "husky": "^8.0.3",
+    "jsdom": "^22.1.0",
+    "lint-staged": "^15.1.0",
+    "npm-run-all": "4.x",
+    "postcss": "^8.4.31",
+    "postcss-cli": "8.x",
+    "postcss-preset-env": "6.x",
+    "prettier": "^2.4.1",
+    "tailwind-scrollbar": "^2.0.0",
+    "tailwindcss": "^3.3.6",
+    "typescript": "4.x",
+    "vitest": "^0.34.6"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

project.inlang/project_id

@@ -0,0 +1 @@
+ddd85f36c36577d96de7533e96ddc7706cbb8776bb4cf8218a033a5c7bcc21f2

project.inlang/settings.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://inlang.com/schema/project-settings",
+  "sourceLanguageTag": "zh",
+  "languageTags": [
+    "en", "zh"
+  ],
+  "modules": [
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-valid-js-identifier@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@latest/dist/index.js"
+  ],
+  "plugin.inlang.messageFormat": {
+    "pathPattern": "./messages/{languageTag}.json"
+  }
+}

public/_headers

@@ -0,0 +1,3 @@
+/* 
+Cross-Origin-Opener-Policy: same-origin 
+Cross-Origin-Embedder-Policy: require-corp

src/App.tsx

@@ -0,0 +1,185 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import { ArrowLeftIcon, InformationCircleIcon } from '@heroicons/react/outline'
+import { useEffect, useRef, useState } from 'react'
+import { useClickAway } from 'react-use'
+import Button from './components/Button'
+import FileSelect from './components/FileSelect'
+import Modal from './components/Modal'
+import Editor from './Editor'
+import { resizeImageFile } from './utils'
+import Progress from './components/Progress'
+import { downloadModel } from './adapters/cache'
+import * as m from './paraglide/messages'
+import {
+  languageTag,
+  onSetLanguageTag,
+  setLanguageTag,
+} from './paraglide/runtime'
+
+function App() {
+  const [file, setFile] = useState<File>()
+  const [stateLanguageTag, setStateLanguageTag] = useState<'en' | 'zh'>('zh')
+
+  onSetLanguageTag(() => setStateLanguageTag(languageTag()))
+
+  const [showAbout, setShowAbout] = useState(false)
+  const modalRef = useRef(null)
+
+  const [downloadProgress, setDownloadProgress] = useState(100)
+
+  useEffect(() => {
+    downloadModel('inpaint', setDownloadProgress)
+  }, [])
+
+  useClickAway(modalRef, () => {
+    setShowAbout(false)
+  })
+
+  async function startWithDemoImage(img: string) {
+    const imgBlob = await fetch(`/examples/${img}.jpeg`).then(r => r.blob())
+    setFile(new File([imgBlob], `${img}.jpeg`, { type: 'image/jpeg' }))
+  }
+
+  return (
+    <div className="min-h-full flex flex-col">
+      <header className="z-10 shadow flex flex-row items-center md:justify-between h-14">
+        <Button
+          className={[
+            file ? '' : 'opacity-50 pointer-events-none',
+            'pl-1 pr-1 mx-1 sm:mx-5',
+          ].join(' ')}
+          icon={<ArrowLeftIcon className="w-6 h-6" />}
+          onClick={() => {
+            setFile(undefined)
+          }}
+        >
+          <div className="md:w-[290px]">
+            <span className="hidden sm:inline select-none">
+              {m.start_new()}
+            </span>
+          </div>
+        </Button>
+        <div className="text-4xl font-bold text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out">
+          Inpaint-web
+        </div>
+        <div className="hidden md:flex justify-end w-[300px] mx-1 sm:mx-5">
+          <Button
+            className="mr-5 flex"
+            onClick={() => {
+              if (languageTag() === 'zh') {
+                setLanguageTag('en')
+              } else {
+                setLanguageTag('zh')
+              }
+            }}
+          >
+            <p>{languageTag() === 'en' ? '切换到中文' : 'en'}</p>
+          </Button>
+          <Button
+            className="w-38 flex sm:visible"
+            icon={<InformationCircleIcon className="w-6 h-6" />}
+            onClick={() => {
+              setShowAbout(true)
+            }}
+          >
+            <p>{m.feedback()}</p>
+          </Button>
+        </div>
+      </header>
+
+      <main
+        style={{
+          height: 'calc(100vh - 56px)',
+        }}
+        className=" relative"
+      >
+        {file ? (
+          <Editor file={file} />
+        ) : (
+          <>
+            <div className="flex h-full flex-1 flex-col items-center justify-center overflow-hidden">
+              <div className="h-72 sm:w-1/2 max-w-5xl">
+                <FileSelect
+                  onSelection={async f => {
+                    const { file: resizedFile } = await resizeImageFile(
+                      f,
+                      1024 * 4
+                    )
+                    setFile(resizedFile)
+                  }}
+                />
+              </div>
+              <div className="flex flex-col sm:flex-row pt-10 items-center justify-center cursor-pointer">
+                <span className="text-gray-500">{m.try_it_images()}</span>
+                <div className="flex space-x-2 sm:space-x-4 px-4">
+                  {['bag', 'dog', 'car', 'bird', 'jacket', 'shoe', 'paris'].map(
+                    image => (
+                      <div
+                        key={image}
+                        onClick={() => startWithDemoImage(image)}
+                        role="button"
+                        onKeyDown={() => startWithDemoImage(image)}
+                        tabIndex={-1}
+                      >
+                        <img
+                          className="rounded-md hover:opacity-75 w-auto h-25"
+                          src={`examples/${image}.jpeg`}
+                          alt={image}
+                          style={{ height: '100px' }}
+                        />
+                      </div>
+                    )
+                  )}
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </main>
+
+      {showAbout && (
+        <Modal>
+          <div ref={modalRef} className="text-xl space-y-5">
+            <p>
+              {' '}
+              任何问题到:{' '}
+              <a
+                href="https://github.com/lxfater/inpaint-web"
+                style={{ color: 'blue' }}
+                rel="noreferrer"
+                target="_blank"
+              >
+                Inpaint-web
+              </a>{' '}
+              反馈
+            </p>
+            <p>
+              {' '}
+              For any questions, please go to:{' '}
+              <a
+                href="https://github.com/lxfater/inpaint-web"
+                style={{ color: 'blue' }}
+                rel="noreferrer"
+                target="_blank"
+              >
+                Inpaint-web
+              </a>{' '}
+              to provide feedback.
+            </p>
+          </div>
+        </Modal>
+      )}
+      {!(downloadProgress === 100) && (
+        <Modal>
+          <div className="text-xl space-y-5">
+            <p>{m.inpaint_model_download_message()}</p>
+            <Progress percent={downloadProgress} />
+          </div>
+        </Modal>
+      )}
+    </div>
+  )
+}
+
+export default App

src/Editor.tsx

@@ -0,0 +1,707 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import { DownloadIcon, EyeIcon, ViewBoardsIcon } from '@heroicons/react/outline'
+import { useCallback, useEffect, useState, useRef, useMemo } from 'react'
+import { useWindowSize } from 'react-use'
+import inpaint from './adapters/inpainting'
+import superResolution from './adapters/superResolution'
+import Button from './components/Button'
+import Slider from './components/Slider'
+import { downloadImage, loadImage, useImage } from './utils'
+import Progress from './components/Progress'
+import { modelExists, downloadModel } from './adapters/cache'
+import Modal from './components/Modal'
+import * as m from './paraglide/messages'
+
+interface EditorProps {
+  file: File
+}
+
+interface Line {
+  size?: number
+  pts: { x: number; y: number }[]
+  src: string
+}
+
+function drawLines(
+  ctx: CanvasRenderingContext2D,
+  lines: Line[],
+  color = 'rgba(255, 0, 0, 0.5)'
+) {
+  ctx.strokeStyle = color
+  ctx.lineCap = 'round'
+  ctx.lineJoin = 'round'
+
+  lines.forEach(line => {
+    if (!line?.pts.length || !line.size) {
+      return
+    }
+    ctx.lineWidth = line.size
+    ctx.beginPath()
+    ctx.moveTo(line.pts[0].x, line.pts[0].y)
+    line.pts.forEach(pt => ctx.lineTo(pt.x, pt.y))
+    ctx.stroke()
+  })
+}
+
+const BRUSH_HIDE_ON_SLIDER_CHANGE_TIMEOUT = 2000
+export default function Editor(props: EditorProps) {
+  const { file } = props
+  const [brushSize, setBrushSize] = useState(40)
+  const [original, isOriginalLoaded] = useImage(file)
+  const [renders, setRenders] = useState<HTMLImageElement[]>([])
+  const [context, setContext] = useState<CanvasRenderingContext2D>()
+  const [maskCanvas] = useState<HTMLCanvasElement>(() => {
+    return document.createElement('canvas')
+  })
+  const [lines, setLines] = useState<Line[]>([{ pts: [], src: '' }])
+  const brushRef = useRef<HTMLDivElement>(null)
+  const [showBrush, setShowBrush] = useState(false)
+  const [hideBrushTimeout, setHideBrushTimeout] = useState(0)
+  const [showOriginal, setShowOriginal] = useState(false)
+  const [isInpaintingLoading, setIsProcessingLoading] = useState(false)
+  const [generateProgress, setGenerateProgress] = useState(0)
+  const modalRef = useRef(null)
+  const [separator, setSeparator] = useState<HTMLDivElement>()
+  const [useSeparator, setUseSeparator] = useState(false)
+  const [originalImg, setOriginalImg] = useState<HTMLDivElement>()
+  const [separatorLeft, setSeparatorLeft] = useState(0)
+  const historyListRef = useRef<HTMLDivElement>(null)
+  const isBrushSizeChange = useRef<boolean>(false)
+  const scaledBrushSize = useMemo(() => brushSize, [brushSize])
+  const canvasDiv = useRef<HTMLDivElement>(null)
+  const [downloaded, setDownloaded] = useState(true)
+  const [downloadProgress, setDownloadProgress] = useState(0)
+  const windowSize = useWindowSize()
+
+  const draw = useCallback(
+    (index = -1) => {
+      if (!context) {
+        return
+      }
+      context.clearRect(0, 0, context.canvas.width, context.canvas.height)
+      const currRender =
+        renders[index === -1 ? renders.length - 1 : index] ?? original
+      const { canvas } = context
+
+      const divWidth = canvasDiv.current!.offsetWidth
+      const divHeight = canvasDiv.current!.offsetHeight
+
+      // 计算宽高比
+      const imgAspectRatio = currRender.width / currRender.height
+      const divAspectRatio = divWidth / divHeight
+
+      let canvasWidth
+      let canvasHeight
+
+      // 比较宽高比以决定如何缩放
+      if (divAspectRatio > imgAspectRatio) {
+        // div 较宽，基于高度缩放
+        canvasHeight = divHeight
+        canvasWidth = currRender.width * (divHeight / currRender.height)
+      } else {
+        // div 较窄，基于宽度缩放
+        canvasWidth = divWidth
+        canvasHeight = currRender.height * (divWidth / currRender.width)
+      }
+
+      canvas.width = canvasWidth
+      canvas.height = canvasHeight
+
+      if (currRender?.src) {
+        context.drawImage(currRender, 0, 0, canvas.width, canvas.height)
+      } else {
+        context.drawImage(original, 0, 0, canvas.width, canvas.height)
+      }
+      const currentLine = lines[lines.length - 1]
+      drawLines(context, [currentLine])
+    },
+    [context, lines, original, renders]
+  )
+
+  const refreshCanvasMask = useCallback(() => {
+    if (!context?.canvas.width || !context?.canvas.height) {
+      throw new Error('canvas has invalid size')
+    }
+    maskCanvas.width = context?.canvas.width
+    maskCanvas.height = context?.canvas.height
+    const ctx = maskCanvas.getContext('2d')
+    if (!ctx) {
+      throw new Error('could not retrieve mask canvas')
+    }
+    // Just need the finishing touch
+    const line = lines.slice(-1)[0]
+    if (line) drawLines(ctx, [line], 'white')
+  }, [context?.canvas.height, context?.canvas.width, lines, maskCanvas])
+
+  // Draw once the original image is loaded
+  useEffect(() => {
+    if (!context?.canvas) {
+      return
+    }
+    if (isOriginalLoaded) {
+      draw()
+    }
+  }, [context?.canvas, draw, original, isOriginalLoaded, windowSize])
+
+  // Handle mouse interactions
+  useEffect(() => {
+    const canvas = context?.canvas
+    if (!canvas) {
+      return
+    }
+    const onMouseMove = (ev: MouseEvent) => {
+      if (brushRef.current) {
+        const x = ev.pageX - scaledBrushSize / 2
+        const y = ev.pageY - scaledBrushSize / 2
+
+        brushRef.current.style.transform = `translate3d(${x}px, ${y}px, 0)`
+      }
+    }
+    const onPaint = (px: number, py: number) => {
+      const currLine = lines[lines.length - 1]
+      currLine.pts.push({ x: px, y: py })
+      draw()
+    }
+    const onMouseDrag = (ev: MouseEvent) => {
+      const px = ev.offsetX - canvas.offsetLeft
+      const py = ev.offsetY - canvas.offsetTop
+      onPaint(px, py)
+    }
+
+    const onPointerUp = async () => {
+      if (!original.src || showOriginal) {
+        return
+      }
+      if (lines.slice(-1)[0]?.pts.length === 0) {
+        return
+      }
+      const loading = onloading()
+      canvas.removeEventListener('mousemove', onMouseDrag)
+      canvas.removeEventListener('mouseup', onPointerUp)
+      refreshCanvasMask()
+      try {
+        const start = Date.now()
+        console.log('inpaint_start')
+        // each time based on the last result, the first is the original
+        const newFile = renders.slice(-1)[0] ?? file
+        const res = await inpaint(newFile, maskCanvas.toDataURL())
+        if (!res) {
+          throw new Error('empty response')
+        }
+        // TODO: fix the render if it failed loading
+        const newRender = new Image()
+        newRender.dataset.id = Date.now().toString()
+        await loadImage(newRender, res)
+        renders.push(newRender)
+        lines.push({ pts: [], src: '' } as Line)
+        setRenders([...renders])
+        setLines([...lines])
+        console.log('inpaint_processed', {
+          duration: Date.now() - start,
+        })
+      } catch (e: any) {
+        console.log('inpaint_failed', {
+          error: e,
+        })
+        // eslint-disable-next-line
+        alert(e.message ? e.message : e.toString())
+      }
+      if (historyListRef.current) {
+        const { scrollWidth, clientWidth } = historyListRef.current
+        if (scrollWidth > clientWidth) {
+          historyListRef.current.scrollTo(scrollWidth, 0)
+        }
+      }
+      loading.close()
+      draw()
+    }
+    canvas.addEventListener('mousemove', onMouseMove)
+
+    const onTouchMove = (ev: TouchEvent) => {
+      ev.preventDefault()
+      ev.stopPropagation()
+      const currLine = lines[lines.length - 1]
+      const coords = canvas.getBoundingClientRect()
+      currLine.pts.push({
+        x: ev.touches[0].clientX - coords.x,
+        y: ev.touches[0].clientY - coords.y,
+      })
+      draw()
+    }
+    const onPointerStart = () => {
+      if (!original.src || showOriginal) {
+        return
+      }
+      const currLine = lines[lines.length - 1]
+      currLine.size = brushSize
+      canvas.addEventListener('mousemove', onMouseDrag)
+      canvas.addEventListener('mouseup', onPointerUp)
+      // onPaint(e)
+    }
+
+    canvas.addEventListener('touchstart', onPointerStart)
+    canvas.addEventListener('touchmove', onTouchMove)
+    canvas.addEventListener('touchend', onPointerUp)
+    canvas.onmouseenter = () => {
+      window.clearTimeout(hideBrushTimeout)
+      setShowBrush(true && !showOriginal)
+    }
+    canvas.onmouseleave = () => setShowBrush(false)
+    canvas.onmousedown = onPointerStart
+
+    return () => {
+      canvas.removeEventListener('mousemove', onMouseDrag)
+      canvas.removeEventListener('mousemove', onMouseMove)
+      canvas.removeEventListener('mouseup', onPointerUp)
+      canvas.removeEventListener('touchstart', onPointerStart)
+      canvas.removeEventListener('touchmove', onTouchMove)
+      canvas.removeEventListener('touchend', onPointerUp)
+      canvas.onmouseenter = null
+      canvas.onmouseleave = null
+      canvas.onmousedown = null
+    }
+  }, [
+    brushSize,
+    context,
+    file,
+    draw,
+    lines,
+    refreshCanvasMask,
+    maskCanvas,
+    original.src,
+    renders,
+    showOriginal,
+    hideBrushTimeout,
+  ])
+
+  useEffect(() => {
+    if (!separator || !originalImg) return
+
+    const separatorMove = (ev: MouseEvent) => {
+      ev.preventDefault()
+      ev.stopPropagation()
+      if (context?.canvas) {
+        const { width } = context?.canvas
+        const canvasRect = context?.canvas.getBoundingClientRect()
+        const separatorOffsetLeft = ev.pageX - canvasRect.left
+        if (separatorOffsetLeft <= width && separatorOffsetLeft >= 0) {
+          setSeparatorLeft(separatorOffsetLeft)
+        } else if (separatorOffsetLeft < 0) {
+          setSeparatorLeft(0)
+        } else if (separatorOffsetLeft > width) {
+          setSeparatorLeft(width)
+        }
+      }
+    }
+
+    const separatorDown = () => {
+      window.addEventListener('mousemove', separatorMove)
+      setUseSeparator(true)
+    }
+
+    const separatorUp = () => {
+      window.removeEventListener('mousemove', separatorMove)
+      setUseSeparator(false)
+    }
+
+    separator.addEventListener('mousedown', separatorDown)
+    window.addEventListener('mouseup', separatorUp)
+
+    return () => {
+      separator.removeEventListener('mousedown', separatorDown)
+      window.removeEventListener('mouseup', separatorUp)
+    }
+  }, [separator, context])
+
+  function download() {
+    const currRender = renders.at(-1) ?? original
+    downloadImage(currRender.currentSrc, 'IMG')
+  }
+
+  const undo = useCallback(async () => {
+    const l = lines
+    l.pop()
+    l.pop()
+    setLines([...l, { pts: [], src: '' }])
+    const r = renders
+    r.pop()
+    setRenders([...r])
+  }, [lines, renders])
+
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (!renders.length) {
+        return
+      }
+      const isCmdZ = (event.metaKey || event.ctrlKey) && event.key === 'z'
+      if (isCmdZ) {
+        event.preventDefault()
+        undo()
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => {
+      window.removeEventListener('keydown', handler)
+    }
+  }, [renders, undo])
+
+  const backTo = useCallback(
+    (index: number) => {
+      lines.splice(index + 1)
+      setLines([...lines, { pts: [], src: '' }])
+      renders.splice(index + 1)
+      setRenders([...renders])
+    },
+    [renders, lines]
+  )
+
+  const History = useMemo(
+    () =>
+      renders.map((render, index) => {
+        return (
+          <div
+            key={render.dataset.id}
+            style={{
+              position: 'relative',
+              display: 'inline-block',
+              flexShrink: 0,
+            }}
+          >
+            <img
+              src={render.src}
+              alt="render"
+              className="rounded-sm"
+              style={{
+                height: '90px',
+              }}
+            />
+            <Button
+              className="hover:opacity-100 opacity-0 cursor-pointer rounded-sm"
+              style={{
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              onClick={() => backTo(index)}
+              onEnter={() => draw(index)}
+              onLeave={draw}
+            >
+              <div
+                style={{
+                  color: '#fff',
+                  fontSize: '12px',
+                  textAlign: 'center',
+                }}
+              >
+                回到这
+                <br />
+                Back here
+              </div>
+            </Button>
+          </div>
+        )
+      }),
+    [renders, backTo]
+  )
+
+  const handleSliderStart = () => {
+    setShowBrush(true)
+  }
+  const handleSliderChange = (sliderValue: number) => {
+    if (!isBrushSizeChange.current) {
+      isBrushSizeChange.current = true
+    }
+    if (brushRef.current) {
+      const x = document.documentElement.clientWidth / 2 - scaledBrushSize / 2
+      const y = document.documentElement.clientHeight / 2 - scaledBrushSize / 2
+
+      brushRef.current.style.transform = `translate3d(${x}px, ${y}px, 0)`
+    }
+    setBrushSize(sliderValue)
+    window.clearTimeout(hideBrushTimeout)
+    setHideBrushTimeout(
+      window.setTimeout(() => {
+        setShowBrush(false)
+      }, BRUSH_HIDE_ON_SLIDER_CHANGE_TIMEOUT)
+    )
+  }
+
+  const onloading = useCallback(() => {
+    setIsProcessingLoading(true)
+    setGenerateProgress(0)
+    const progressTimer = window.setInterval(() => {
+      setGenerateProgress(p => {
+        if (p < 90) return p + 10 * Math.random()
+        if (p >= 90 && p < 99) return p + 1 * Math.random()
+        // Do not hide the progress bar after 99%,cause sometimes long time progress
+        // window.setTimeout(() => setIsInpaintingLoading(false), 500)
+        return p
+      })
+    }, 1000)
+    return {
+      close: () => {
+        clearInterval(progressTimer)
+        setGenerateProgress(100)
+        setIsProcessingLoading(false)
+      },
+    }
+  }, [])
+
+  const onSuperResolution = useCallback(async () => {
+    if (!(await modelExists('superResolution'))) {
+      setDownloaded(false)
+      await downloadModel('superResolution', setDownloadProgress)
+      setDownloaded(true)
+    }
+    setIsProcessingLoading(true)
+    try {
+      // 运行
+      const start = Date.now()
+      console.log('superResolution_start')
+      // each time based on the last result, the first is the original
+      const newFile = renders.at(-1) ?? file
+      const res = await superResolution(newFile, setGenerateProgress)
+      if (!res) {
+        throw new Error('empty response')
+      }
+      // TODO: fix the render if it failed loading
+      const newRender = new Image()
+      newRender.dataset.id = Date.now().toString()
+      await loadImage(newRender, res)
+      renders.push(newRender)
+      lines.push({ pts: [], src: '' } as Line)
+      setRenders([...renders])
+      setLines([...lines])
+      console.log('superResolution_processed', {
+        duration: Date.now() - start,
+      })
+
+      // 替换当前图片
+    } catch (error) {
+      console.error('superResolution', error)
+    } finally {
+      setIsProcessingLoading(false)
+    }
+  }, [file, lines, original.naturalHeight, original.naturalWidth, renders])
+
+  return (
+    <div
+      className={[
+        'flex flex-col items-center h-full justify-between',
+        isInpaintingLoading ? 'animate-pulse-fast pointer-events-none' : '',
+      ].join(' ')}
+    >
+      {/* History */}
+      <div
+        ref={historyListRef}
+        style={{
+          height: '116px',
+        }}
+        className={[
+          'flex-shrink-0',
+          'mt-4 border p-3 rounded',
+          'flex items-left w-full max-w-4xl',
+          'space-y-0 flex-row space-x-5',
+          'scrollbar-thin scrollbar-thumb-black scrollbar-track-primary overflow-x-scroll',
+        ].join(' ')}
+      >
+        {History}
+      </div>
+      {/* 画图 */}
+      <div
+        className={[
+          'flex-grow',
+          'flex justify-center',
+          'my-2',
+          'relative',
+        ].join(' ')}
+        style={{
+          width: '70vw',
+        }}
+        ref={canvasDiv}
+      >
+        <div className="relative">
+          <canvas
+            className="rounded-sm"
+            style={showBrush ? { cursor: 'none' } : {}}
+            ref={r => {
+              if (r && !context) {
+                const ctx = r.getContext('2d')
+                if (ctx) {
+                  setContext(ctx)
+                }
+              }
+            }}
+          />
+          <div
+            className={[
+              'absolute top-0 right-0 pointer-events-none',
+              showOriginal ? '' : 'overflow-hidden',
+            ].join(' ')}
+            style={{
+              width: showOriginal ? `${context?.canvas.width}px` : '0px',
+              height: context?.canvas.height,
+              transitionProperty: 'width, height',
+              transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+              transitionDuration: '300ms',
+            }}
+            ref={r => {
+              if (r && !originalImg) {
+                setOriginalImg(r)
+              }
+            }}
+          >
+            <div
+              className={[
+                'absolute top-0 right-0 pointer-events-none z-10',
+                useSeparator ? 'bg-black text-white' : 'bg-primary ',
+                'w-1',
+                'flex items-center justify-center',
+                'separator',
+              ].join(' ')}
+              style={{
+                left: `${separatorLeft}px`,
+                height: context?.canvas.height,
+                transitionProperty: 'width, height',
+                transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+                transitionDuration: '300ms',
+              }}
+            >
+              <span className="absolute left-1 bottom-0 p-1 bg-opacity-25 bg-black rounded text-white select-none">
+                original
+              </span>
+              <div
+                className={[
+                  'absolute py-2 px-1 rounded-md pointer-events-auto',
+                  useSeparator ? 'bg-black' : 'bg-primary ',
+                ].join(' ')}
+                style={{ cursor: 'ew-resize' }}
+                ref={r => {
+                  if (r && !separator) {
+                    setSeparator(r)
+                  }
+                }}
+              >
+                <ViewBoardsIcon
+                  className="w-5 h-5"
+                  style={{ cursor: 'ew-resize' }}
+                />
+              </div>
+            </div>
+            <img
+              className="absolute right-0"
+              src={original.src}
+              alt="original"
+              width={`${context?.canvas.width}px`}
+              height={`${context?.canvas.height}px`}
+              style={{
+                width: `${context?.canvas.width}px`,
+                height: `${context?.canvas.height}px`,
+                maxWidth: 'none',
+                clipPath: `inset(0 0 0 ${separatorLeft}px)`,
+              }}
+            />
+          </div>
+          {isInpaintingLoading && (
+            <div className="z-10 bg-white absolute bg-opacity-80 top-0 left-0 right-0 bottom-0  h-full w-full flex justify-center items-center">
+              <div ref={modalRef} className="text-xl space-y-5 w-4/5 sm:w-1/2">
+                <p>正在处理中，请耐心等待。。。</p>
+                <p>It is being processed, please be patient...</p>
+                <Progress percent={generateProgress} />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {!downloaded && (
+        <Modal>
+          <div className="text-xl space-y-5">
+            <p>{m.upscaleing_model_download_message()}</p>
+            <Progress percent={downloadProgress} />
+          </div>
+        </Modal>
+      )}
+      {showBrush && (
+        <div
+          className="fixed rounded-full bg-red-500 bg-opacity-50 pointer-events-none left-0 top-0"
+          style={{
+            width: `${scaledBrushSize}px`,
+            height: `${scaledBrushSize}px`,
+            transform: `translate3d(-100px, -100px, 0)`,
+          }}
+          ref={brushRef}
+        />
+      )}
+      {/* 工具栏 */}
+      <div
+        className={[
+          'flex-shrink-0',
+          'bg-white rounded-md border border-gray-300 hover:border-gray-400 shadow-md hover:shadow-lg p-4 transition duration-200 ease-in-out',
+          'flex items-center w-full max-w-4xl py-6 mb-4, justify-between',
+          'flex-col space-y-2 sm:space-y-0 sm:flex-row sm:space-x-5',
+        ].join(' ')}
+      >
+        {renders.length > 0 && (
+          <Button
+            primary
+            onClick={undo}
+            icon={
+              <svg
+                className="w-6 h-6"
+                width="19"
+                height="9"
+                viewBox="0 0 19 9"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1H2ZM1 8H0V9H1V8ZM8 9C8.55228 9 9 8.55229 9 8C9 7.44771 8.55228 7 8 7V9ZM16.5963 7.42809C16.8327 7.92721 17.429 8.14016 17.9281 7.90374C18.4272 7.66731 18.6402 7.07103 18.4037 6.57191L16.5963 7.42809ZM16.9468 5.83205L17.8505 5.40396L16.9468 5.83205ZM0 1V8H2V1H0ZM1 9H8V7H1V9ZM1.66896 8.74329L6.66896 4.24329L5.33104 2.75671L0.331035 7.25671L1.66896 8.74329ZM16.043 6.26014L16.5963 7.42809L18.4037 6.57191L17.8505 5.40396L16.043 6.26014ZM6.65079 4.25926C9.67554 1.66661 14.3376 2.65979 16.043 6.26014L17.8505 5.40396C15.5805 0.61182 9.37523 -0.710131 5.34921 2.74074L6.65079 4.25926Z"
+                  fill="currentColor"
+                />
+              </svg>
+            }
+          >
+            {m.undo()}
+          </Button>
+        )}
+        <Slider
+          label={m.bruch_size()}
+          min={10}
+          max={200}
+          value={brushSize}
+          onChange={handleSliderChange}
+          onStart={handleSliderStart}
+        />
+        <Button
+          primary={showOriginal}
+          icon={<EyeIcon className="w-6 h-6" />}
+          onUp={() => {
+            setShowOriginal(!showOriginal)
+            setTimeout(() => setSeparatorLeft(0), 300)
+          }}
+        >
+          {m.original()}
+        </Button>
+        {!showOriginal && (
+          <Button onUp={onSuperResolution}>{m.upscale()}</Button>
+        )}
+
+        <Button
+          primary
+          icon={<DownloadIcon className="w-6 h-6" />}
+          onClick={download}
+        >
+          {m.download()}
+        </Button>
+      </div>
+    </div>
+  )
+}

src/adapters/cache.ts

@@ -0,0 +1,131 @@
+import localforage from 'localforage'
+
+export type modelType = 'inpaint' | 'superResolution'
+
+localforage.config({
+  name: 'modelCache',
+})
+
+export async function saveModel(modelType: modelType, modelBlob: ArrayBuffer) {
+  await localforage.setItem(getModel(modelType).name, modelBlob)
+}
+
+function getModel(modelType: modelType) {
+  if (modelType === 'inpaint') {
+    const modelList = [
+      {
+        name: 'model',
+        url: 'https://huggingface.co/lxfater/inpaint-web/resolve/main/migan.onnx',
+        backupUrl: '',
+      },
+      {
+        name: 'model-perf',
+        url: 'https://huggingface.co/andraniksargsyan/migan/resolve/main/migan.onnx',
+        backupUrl: '',
+      },
+      {
+        name: 'migan-pipeline-v2',
+        url: 'https://huggingface.co/andraniksargsyan/migan/resolve/main/migan_pipeline_v2.onnx',
+        backupUrl:
+          'https://worker-share-proxy-01f5.lxfater.workers.dev/andraniksargsyan/migan/resolve/main/migan_pipeline_v2.onnx',
+      },
+    ]
+    const currentModel = modelList[2]
+    return currentModel
+  }
+  if (modelType === 'superResolution') {
+    const modelList = [
+      {
+        name: 'realesrgan-x4',
+        url: 'https://huggingface.co/lxfater/inpaint-web/resolve/main/realesrgan-x4.onnx',
+        backupUrl:
+          'https://worker-share-proxy-01f5.lxfater.workers.dev/lxfater/inpaint-web/resolve/main/realesrgan-x4.onnx',
+      },
+    ]
+    const currentModel = modelList[0]
+    return currentModel
+  }
+  throw new Error('wrong modelType')
+}
+
+export async function loadModel(modelType: modelType): Promise<ArrayBuffer> {
+  const model = (await localforage.getItem(
+    getModel(modelType).name
+  )) as ArrayBuffer
+  return model
+}
+
+export async function modelExists(modelType: modelType) {
+  const model = await loadModel(modelType)
+  return model !== null && model !== undefined
+}
+
+export async function ensureModel(modelType: modelType) {
+  if (await modelExists(modelType)) {
+    return loadModel(modelType)
+  }
+  const model = getModel(modelType)
+  const response = await fetch(model.url)
+  const buffer = await response.arrayBuffer()
+  await saveModel(modelType, buffer)
+  return buffer
+}
+
+export async function downloadModel(
+  modelType: modelType,
+  setDownloadProgress: (arg0: number) => void
+) {
+  if (await modelExists(modelType)) {
+    return
+  }
+
+  async function downloadFromUrl(url: string) {
+    console.log('start download from', url)
+    setDownloadProgress(0)
+    const response = await fetch(url)
+    const fullSize = response.headers.get('content-length')
+    const reader = response.body!.getReader()
+    const total: Uint8Array[] = []
+    let downloaded = 0
+
+    while (true) {
+      const { done, value } = await reader.read()
+
+      if (done) {
+        break
+      }
+
+      downloaded += value?.length || 0
+
+      if (value) {
+        total.push(value)
+      }
+
+      setDownloadProgress((downloaded / Number(fullSize)) * 100)
+    }
+
+    const buffer = new Uint8Array(downloaded)
+    let offset = 0
+    for (const chunk of total) {
+      buffer.set(chunk, offset)
+      offset += chunk.length
+    }
+
+    await saveModel(modelType, buffer)
+    setDownloadProgress(100)
+  }
+
+  const model = getModel(modelType)
+  try {
+    await downloadFromUrl(model.url)
+  } catch (e) {
+    if (model.backupUrl) {
+      try {
+        await downloadFromUrl(model.backupUrl)
+      } catch (r) {
+        alert(`Failed to download the backup model: ${r}`)
+      }
+    }
+    alert(`Failed to download the model, network problem: ${e}`)
+  }
+}

src/adapters/inpainting.ts

@@ -0,0 +1,271 @@
+// @ts-nocheck
+/* eslint-disable camelcase */
+/* eslint-disable no-plusplus */
+import cv, { Mat } from 'opencv-ts'
+import { ensureModel } from './cache'
+import { getCapabilities } from './util'
+import type { modelType } from './cache'
+// ort.env.debug = true
+// ort.env.logLevel = 'verbose'
+// ort.env.webgpu.profilingMode = 'default'
+
+function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.crossOrigin = 'Anonymous'
+    img.onload = () => resolve(img)
+    img.onerror = () => reject(new Error(`Failed to load image from ${url}`))
+    img.src = url
+  })
+}
+function imgProcess(img: Mat) {
+  const channels = new cv.MatVector()
+  cv.split(img, channels) // 分割通道
+
+  const C = channels.size() // 通道数
+  const H = img.rows // 图像高度
+  const W = img.cols // 图像宽度
+
+  const chwArray = new Uint8Array(C * H * W) // 创建新的数组来存储转换后的数据
+
+  for (let c = 0; c < C; c++) {
+    const channelData = channels.get(c).data // 获取单个通道的数据
+    for (let h = 0; h < H; h++) {
+      for (let w = 0; w < W; w++) {
+        chwArray[c * H * W + h * W + w] = channelData[h * W + w]
+        // chwArray[c * H * W + h * W + w] = channelData[h * W + w]
+      }
+    }
+  }
+
+  channels.delete() // 清理内存
+  return chwArray // 返回转换后的数据
+}
+function markProcess(img: Mat) {
+  const channels = new cv.MatVector()
+  cv.split(img, channels) // 分割通道
+
+  const C = 1 // 通道数
+  const H = img.rows // 图像高度
+  const W = img.cols // 图像宽度
+
+  const chwArray = new Uint8Array(C * H * W) // 创建新的数组来存储转换后的数据
+
+  for (let c = 0; c < C; c++) {
+    const channelData = channels.get(0).data // 获取单个通道的数据
+    for (let h = 0; h < H; h++) {
+      for (let w = 0; w < W; w++) {
+        chwArray[c * H * W + h * W + w] = (channelData[h * W + w] !== 255) * 255
+      }
+    }
+  }
+
+  channels.delete() // 清理内存
+  return chwArray // 返回转换后的数据
+}
+function processImage(
+  img: HTMLImageElement,
+  canvasId?: string
+): Promise<Uint8Array> {
+  return new Promise((resolve, reject) => {
+    try {
+      const src = cv.imread(img)
+      const src_rgb = new cv.Mat()
+      // 将图像从RGBA转换为RGB
+      cv.cvtColor(src, src_rgb, cv.COLOR_RGBA2RGB)
+      if (canvasId) {
+        cv.imshow(canvasId, src_rgb)
+      }
+      resolve(imgProcess(src_rgb))
+
+      src.delete()
+      src_rgb.delete()
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+function processMark(
+  img: HTMLImageElement,
+  canvasId?: string
+): Promise<Uint8Array> {
+  return new Promise((resolve, reject) => {
+    try {
+      const src = cv.imread(img)
+      const src_grey = new cv.Mat()
+
+      // 将图像从RGBA转换为二值化
+      cv.cvtColor(src, src_grey, cv.COLOR_BGR2GRAY)
+
+      if (canvasId) {
+        cv.imshow(canvasId, src_grey)
+      }
+
+      resolve(markProcess(src_grey))
+
+      src.delete()
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+function postProcess(uint8Data: Uint8Array, width: number, height: number) {
+  const chwToHwcData = []
+  const size = width * height
+
+  for (let h = 0; h < height; h++) {
+    for (let w = 0; w < width; w++) {
+      for (let c = 0; c < 3; c++) {
+        // RGB通道
+        const chwIndex = c * size + h * width + w
+        const pixelVal = uint8Data[chwIndex]
+        let newPiex = pixelVal
+        if (pixelVal > 255) {
+          newPiex = 255
+        } else if (pixelVal < 0) {
+          newPiex = 0
+        }
+        chwToHwcData.push(newPiex) // 归一化反转
+      }
+      chwToHwcData.push(255) // Alpha通道
+    }
+  }
+  return chwToHwcData
+}
+
+function imageDataToDataURL(imageData) {
+  // 创建 canvas
+  const canvas = document.createElement('canvas')
+  canvas.width = imageData.width
+  canvas.height = imageData.height
+
+  // 绘制 imageData 到 canvas
+  const ctx = canvas.getContext('2d')
+  ctx.putImageData(imageData, 0, 0)
+
+  // 导出为数据 URL
+  return canvas.toDataURL()
+}
+
+function configEnv(capabilities) {
+  ort.env.wasm.wasmPaths =
+    'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.16.3/dist/'
+  if (capabilities.webgpu) {
+    ort.env.wasm.numThreads = 1
+  } else {
+    if (capabilities.threads) {
+      ort.env.wasm.numThreads = navigator.hardwareConcurrency ?? 4
+    }
+    if (capabilities.simd) {
+      ort.env.wasm.simd = true
+    }
+    ort.env.wasm.proxy = true
+  }
+  console.log('env', ort.env.wasm)
+}
+const resizeMark = (
+  image: HTMLImageElement,
+  width: number,
+  height: number
+): Promise<HTMLImageElement> => {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas')
+    canvas.width = width
+    canvas.height = height
+
+    // 将图片绘制到canvas上，并调整大小
+    const ctx = canvas.getContext('2d')
+    if (!ctx) {
+      reject(new Error('Unable to get canvas context'))
+      return
+    }
+    ctx.drawImage(image, 0, 0, width, height)
+
+    // 获取调整大小后的图片URL
+    const resizedImageUrl = canvas.toDataURL()
+
+    // 创建一个新的Image对象并设置其src为调整大小后的图片URL
+    const resizedImage = new Image()
+    resizedImage.onload = () => resolve(resizedImage)
+    resizedImage.onerror = () =>
+      reject(new Error('Failed to load resized image'))
+    resizedImage.src = resizedImageUrl
+  })
+}
+let model: ArrayBuffer | null = null
+export default async function inpaint(
+  imageFile: File | HTMLImageElement,
+  maskBase64: string
+) {
+  console.time('sessionCreate')
+  if (!model) {
+    const capabilities = await getCapabilities()
+    configEnv(capabilities)
+    const modelBuffer = await ensureModel('inpaint')
+    model = await ort.InferenceSession.create(modelBuffer, {
+      executionProviders: [capabilities.webgpu ? 'webgpu' : 'wasm'],
+    })
+  }
+  console.timeEnd('sessionCreate')
+  console.time('preProcess')
+
+  const [originalImg, originalMark] = await Promise.all([
+    imageFile instanceof HTMLImageElement
+      ? imageFile
+      : loadImage(URL.createObjectURL(imageFile)),
+    loadImage(maskBase64),
+  ])
+
+  const [img, mark] = await Promise.all([
+    processImage(originalImg),
+    processMark(
+      await resizeMark(originalMark, originalImg.width, originalImg.height)
+    ),
+  ])
+
+  const imageTensor = new ort.Tensor('uint8', img, [
+    1,
+    3,
+    originalImg.height,
+    originalImg.width,
+  ])
+
+  const maskTensor = new ort.Tensor('uint8', mark, [
+    1,
+    1,
+    originalImg.height,
+    originalImg.width,
+  ])
+
+  const Feed: {
+    [key: string]: any
+  } = {
+    [model.inputNames[0]]: imageTensor,
+    [model.inputNames[1]]: maskTensor,
+  }
+
+  console.timeEnd('preProcess')
+
+  console.time('run')
+  const results = await model.run(Feed)
+  console.timeEnd('run')
+
+  console.time('postProcess')
+  const outsTensor = results[model.outputNames[0]]
+  const chwToHwcData = postProcess(
+    outsTensor.data,
+    originalImg.width,
+    originalImg.height
+  )
+  const imageData = new ImageData(
+    new Uint8ClampedArray(chwToHwcData),
+    originalImg.width,
+    originalImg.height
+  )
+  console.log(imageData, 'imageData')
+  const result = imageDataToDataURL(imageData)
+  console.timeEnd('postProcess')
+
+  return result
+}

src/adapters/superResolution.ts

@@ -0,0 +1,297 @@
+/* eslint-disable no-console */
+/* eslint-disable no-plusplus */
+import cv, { Mat } from 'opencv-ts'
+import { getCapabilities } from './util'
+import { ensureModel } from './cache'
+
+function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.crossOrigin = 'Anonymous'
+    img.onload = () => resolve(img)
+    img.onerror = () => reject(new Error(`Failed to load image from ${url}`))
+    img.src = url
+  })
+}
+function imgProcess(img: Mat) {
+  const channels = new cv.MatVector()
+  cv.split(img, channels) // 分割通道
+
+  const C = channels.size() // 通道数
+  const H = img.rows // 图像高度
+  const W = img.cols // 图像宽度
+
+  const chwArray = new Float32Array(C * H * W) // 创建新的数组来存储转换后的数据
+
+  for (let c = 0; c < C; c++) {
+    const channelData = channels.get(c).data // 获取单个通道的数据
+    for (let h = 0; h < H; h++) {
+      for (let w = 0; w < W; w++) {
+        chwArray[c * H * W + h * W + w] = channelData[h * W + w] / 255.0
+        // chwArray[c * H * W + h * W + w] = channelData[h * W + w]
+      }
+    }
+  }
+
+  channels.delete() // 清理内存
+  return chwArray // 返回转换后的数据
+}
+async function tileProc(
+  inputTensor: ort.Tensor,
+  session: ort.InferenceSession,
+  callback: (progress: number) => void
+) {
+  const inputDims = inputTensor.dims
+  const imageW = inputDims[3]
+  const imageH = inputDims[2]
+
+  const rOffset = 0
+  const gOffset = imageW * imageH
+  const bOffset = imageW * imageH * 2
+
+  const outputDims = [
+    inputDims[0],
+    inputDims[1],
+    inputDims[2] * 4,
+    inputDims[3] * 4,
+  ]
+  const outputTensor = new ort.Tensor(
+    'float32',
+    new Float32Array(
+      outputDims[0] * outputDims[1] * outputDims[2] * outputDims[3]
+    ),
+    outputDims
+  )
+
+  const outImageW = outputDims[3]
+  const outImageH = outputDims[2]
+  const outROffset = 0
+  const outGOffset = outImageW * outImageH
+  const outBOffset = outImageW * outImageH * 2
+
+  const tileSize = 64
+  const tilePadding = 6
+  const tileSizePre = tileSize - tilePadding * 2
+
+  const tilesx = Math.ceil(inputDims[3] / tileSizePre)
+  const tilesy = Math.ceil(inputDims[2] / tileSizePre)
+
+  const { data } = inputTensor
+
+  console.log(inputTensor)
+  const numTiles = tilesx * tilesy
+  let currentTile = 0
+
+  for (let i = 0; i < tilesx; i++) {
+    for (let j = 0; j < tilesy; j++) {
+      const ti = Date.now()
+      const tileW = Math.min(tileSizePre, imageW - i * tileSizePre)
+      const tileH = Math.min(tileSizePre, imageH - j * tileSizePre)
+      console.log(`tileW: ${tileW} tileH: ${tileH}`)
+      const tileROffset = 0
+      const tileGOffset = tileSize * tileSize
+      const tileBOffset = tileSize * tileSize * 2
+
+      // padding tile 转移到上面的数据上
+      const tileData = new Float32Array(tileSize * tileSize * 3)
+      for (let xp = -tilePadding; xp < tileSizePre + tilePadding; xp++) {
+        for (let yp = -tilePadding; yp < tileSizePre + tilePadding; yp++) {
+          // 计算在data中的一维坐标，防止边缘溢出
+          let xim = i * tileSizePre + xp
+          if (xim < 0) xim = 0
+          else if (xim >= imageW) xim = imageW - 1
+
+          // 计算在data中的一维坐标，防止边缘溢出
+          let yim = j * tileSizePre + yp
+          if (yim < 0) yim = 0
+          else if (yim >= imageH) yim = imageH - 1
+
+          const idx = xim + yim * imageW
+
+          const xt = xp + tilePadding
+          const yt = yp + tilePadding
+          // const idx = (i * tileSize + x) + (j * tileSize + y) * imageW;
+          // 主要转化到一维的坐标上，
+          tileData[xt + yt * tileSize + tileROffset] = data[idx + rOffset]
+          tileData[xt + yt * tileSize + tileGOffset] = data[idx + gOffset]
+          tileData[xt + yt * tileSize + tileBOffset] = data[idx + bOffset]
+        }
+      }
+
+      const tile = new ort.Tensor('float32', tileData, [
+        1,
+        3,
+        tileSize,
+        tileSize,
+      ])
+      const r = await session.run({ 'input.1': tile })
+      const results = {
+        output: r['1895'],
+      }
+      console.log(`pre dims:${results.output.dims}`)
+
+      const outTileW = tileW * 4
+      const outTileH = tileH * 4
+      const outTileSize = tileSize * 4
+      const outTileSizePre = tileSizePre * 4
+
+      const outTileROffset = 0
+      const outTileGOffset = outTileSize * outTileSize
+      const outTileBOffset = outTileSize * outTileSize * 2
+
+      // add tile to output，直接输出
+      for (let x = 0; x < outTileW; x++) {
+        for (let y = 0; y < outTileH; y++) {
+          const xim = i * outTileSizePre + x
+          const yim = j * outTileSizePre + y
+          const idx = xim + yim * outImageW
+          const xt = x + tilePadding * 4
+          const yt = y + tilePadding * 4
+          outputTensor.data[idx + outROffset] =
+            results.output.data[xt + yt * outTileSize + outTileROffset]
+          outputTensor.data[idx + outGOffset] =
+            results.output.data[xt + yt * outTileSize + outTileGOffset]
+          outputTensor.data[idx + outBOffset] =
+            results.output.data[xt + yt * outTileSize + outTileBOffset]
+        }
+      }
+      currentTile++
+      const dt = Date.now() - ti
+      const remTime = (numTiles - currentTile) * dt
+      console.log(
+        `tile ${currentTile} of ${numTiles} took ${dt} ms, remaining time: ${remTime} ms`
+      )
+      callback(Math.round(100 * (currentTile / numTiles)))
+    }
+  }
+  console.log(`output dims:${outputTensor.dims}`)
+  return outputTensor
+}
+function processImage(
+  img: HTMLImageElement,
+  canvasId?: string
+): Promise<Uint8Array> {
+  return new Promise((resolve, reject) => {
+    try {
+      const src = cv.imread(img)
+      // eslint-disable-next-line camelcase
+      const src_rgb = new cv.Mat()
+      // 将图像从RGBA转换为RGB
+      cv.cvtColor(src, src_rgb, cv.COLOR_RGBA2RGB)
+      if (canvasId) {
+        cv.imshow(canvasId, src_rgb)
+      }
+      resolve(imgProcess(src_rgb))
+
+      src.delete()
+      src_rgb.delete()
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+function configEnv(capabilities: {
+  webgpu: any
+  wasm?: boolean
+  simd: any
+  threads: any
+}) {
+  ort.env.wasm.wasmPaths =
+    'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.16.3/dist/'
+  if (capabilities.webgpu) {
+    ort.env.wasm.numThreads = 1
+  } else {
+    if (capabilities.threads) {
+      ort.env.wasm.numThreads = navigator.hardwareConcurrency ?? 4
+    }
+    if (capabilities.simd) {
+      ort.env.wasm.simd = true
+    }
+    ort.env.wasm.proxy = true
+  }
+  console.log('env', ort.env.wasm)
+}
+function postProcess(floatData: Float32Array, width: number, height: number) {
+  const chwToHwcData = []
+  const size = width * height
+
+  for (let h = 0; h < height; h++) {
+    for (let w = 0; w < width; w++) {
+      for (let c = 0; c < 3; c++) {
+        // RGB通道
+        const chwIndex = c * size + h * width + w
+        const pixelVal = floatData[chwIndex]
+        let newPiex = pixelVal
+        if (pixelVal > 1) {
+          newPiex = 1
+        } else if (pixelVal < 0) {
+          newPiex = 0
+        }
+        chwToHwcData.push(newPiex * 255) // 归一化反转
+      }
+      chwToHwcData.push(255) // Alpha通道
+    }
+  }
+  return chwToHwcData
+}
+
+function imageDataToDataURL(imageData: ImageData) {
+  // 创建 canvas
+  const canvas = document.createElement('canvas')
+  canvas.width = imageData.width
+  canvas.height = imageData.height
+
+  // 绘制 imageData 到 canvas
+  const ctx = canvas.getContext('2d')
+  ctx.putImageData(imageData, 0, 0)
+
+  // 导出为数据 URL
+  return canvas.toDataURL()
+}
+let model: ArrayBuffer | null = null
+export default async function superResolution(
+  imageFile: File | HTMLImageElement,
+  callback: (progress: number) => void
+) {
+  console.time('sessionCreate')
+  if (!model) {
+    const capabilities = await getCapabilities()
+    configEnv(capabilities)
+    const modelBuffer = await ensureModel('superResolution')
+    model = await ort.InferenceSession.create(modelBuffer, {
+      executionProviders: [capabilities.webgpu ? 'webgpu' : 'wasm'],
+    })
+  }
+  console.timeEnd('sessionCreate')
+
+  const img =
+    imageFile instanceof HTMLImageElement
+      ? imageFile
+      : await loadImage(URL.createObjectURL(imageFile))
+  const imageTersorData = await processImage(img)
+  const imageTensor = new ort.Tensor('float32', imageTersorData, [
+    1,
+    3,
+    img.height,
+    img.width,
+  ])
+
+  const result = await tileProc(imageTensor, model, callback)
+  console.time('postProcess')
+  const outsTensor = result
+  const chwToHwcData = postProcess(
+    outsTensor.data,
+    img.width * 4,
+    img.height * 4
+  )
+  const imageData = new ImageData(
+    new Uint8ClampedArray(chwToHwcData),
+    img.width * 4,
+    img.height * 4
+  )
+  console.log(imageData, 'imageData')
+  const url = imageDataToDataURL(imageData)
+  console.timeEnd('postProcess')
+
+  return url
+}

src/adapters/util.ts

@@ -0,0 +1,78 @@
+export async function checkWebgpu() {
+  // @ts-ignore
+  if (!navigator.gpu) {
+    return false
+  }
+  // @ts-ignore
+  const adapter = await navigator.gpu.requestAdapter()
+  if (!adapter) {
+    return false
+  }
+  return true
+}
+export const wasm = () =>
+  typeof WebAssembly === 'object' &&
+  typeof WebAssembly.instantiate === 'function'
+export const threads = () =>
+  (async e => {
+    try {
+      return (
+        typeof MessageChannel !== 'undefined' &&
+          new MessageChannel().port1.postMessage(new SharedArrayBuffer(1)),
+        WebAssembly.validate(e)
+      )
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+    } catch (e) {
+      return !1
+    }
+  })(
+    new Uint8Array([
+      0, 97, 115, 109, 1, 0, 0, 0, 1, 4, 1, 96, 0, 0, 3, 2, 1, 0, 5, 4, 1, 3, 1,
+      1, 10, 11, 1, 9, 0, 65, 0, 254, 16, 2, 0, 26, 11,
+    ])
+  )
+export const simd = async () =>
+  WebAssembly.validate(
+    new Uint8Array([
+      0, 97, 115, 109, 1, 0, 0, 0, 1, 5, 1, 96, 0, 1, 123, 3, 2, 1, 0, 10, 10,
+      1, 8, 0, 65, 0, 253, 15, 253, 98, 11,
+    ])
+  )
+
+export const getCapabilities = async () => {
+  return {
+    webgpu: await checkWebgpu(),
+    wasm: wasm(),
+    simd: await simd(),
+    threads: await threads(),
+  }
+}
+const version = '1.16.3'
+export const getTagSrc = async () => {
+  const prefix = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${version}/dist/`
+  const capablilities = await getCapabilities()
+  if (capablilities.webgpu) {
+    return `${prefix}ort.webgpu.min.js`
+  }
+  if (capablilities.wasm) {
+    if (capablilities.simd || capablilities.threads) {
+      return `${prefix}ort.wasm.min.js`
+    }
+    return `${prefix}ort.wasm-core.min.js`
+  }
+  return `${prefix}ort.min.js`
+}
+
+export const loadingOnnxruntime = async () => {
+  const script = document.createElement('script')
+
+  // 设置script标签的属性，例如src
+  script.src = await getTagSrc() // 替换为您要加载的脚本的URL
+
+  // 将script标签添加到文档的head部分
+  document.head.appendChild(script)
+}
+
+export async function checkGpu() {
+  return !navigator?.gpu && !(await navigator.gpu?.requestAdapter())
+}

src/components/Button.tsx

@@ -0,0 +1,75 @@
+import { ReactNode, useState } from 'react'
+
+interface ButtonProps {
+  children: ReactNode
+  className?: string
+  icon?: ReactNode
+  primary?: boolean
+  style?: {
+    [key: string]: string
+  }
+  onClick?: () => void
+  onDown?: () => void
+  onUp?: () => void
+  onEnter?: () => void
+  onLeave?: () => void
+}
+
+export default function Button(props: ButtonProps) {
+  const {
+    children,
+    className,
+    icon,
+    primary,
+    style,
+    onClick,
+    onDown,
+    onUp,
+    onEnter,
+    onLeave,
+  } = props
+  const [active, setActive] = useState(false)
+  let background = ''
+  if (primary) {
+    background = 'bg-primary hover:bg-black hover:text-white'
+  }
+  if (active) {
+    background = 'bg-black text-white'
+  }
+  if (!primary && !active) {
+    background = 'hover:bg-primary'
+  }
+  return (
+    <div
+      role="button"
+      onKeyDown={() => {
+        onDown?.()
+      }}
+      onClick={onClick}
+      onPointerDown={() => {
+        setActive(true)
+        onDown?.()
+      }}
+      onPointerUp={() => {
+        setActive(false)
+        onUp?.()
+      }}
+      onPointerEnter={() => {
+        onEnter?.()
+      }}
+      onPointerLeave={() => {
+        onLeave?.()
+      }}
+      tabIndex={-1}
+      className={[
+        'inline-flex space-x-3 py-3 px-5 rounded-md cursor-pointer',
+        background,
+        className,
+      ].join(' ')}
+      style={style}
+    >
+      {icon}
+      <span className="whitespace-nowrap select-none">{children}</span>
+    </div>
+  )
+}

src/components/FileSelect.tsx

@@ -0,0 +1,135 @@
+import { useState } from 'react'
+import * as m from '../paraglide/messages'
+
+type FileSelectProps = {
+  onSelection: (file: File) => void
+}
+
+export default function FileSelect(props: FileSelectProps) {
+  const { onSelection } = props
+
+  const [dragHover, setDragHover] = useState(false)
+  const [uploadElemId] = useState(`file-upload-${Math.random().toString()}`)
+
+  function onFileSelected(file: File) {
+    if (!file) {
+      return
+    }
+    // Skip non-image files
+    const isImage = file.type.match('image.*')
+    if (!isImage) {
+      return
+    }
+    try {
+      // Check if file is larger than 10mb
+      if (file.size > 10 * 1024 * 1024) {
+        throw new Error('file too large')
+      }
+      onSelection(file)
+    } catch (e) {
+      // eslint-disable-next-line
+      alert(`error: ${(e as any).message}`)
+    }
+  }
+
+  async function getFile(entry: any): Promise<File> {
+    return new Promise(resolve => {
+      entry.file((file: File) => resolve(file))
+    })
+  }
+
+  /* eslint-disable no-await-in-loop */
+
+  // Drop handler function to get all files
+  async function getAllFileEntries(items: DataTransferItemList) {
+    const fileEntries: Array<File> = []
+    // Use BFS to traverse entire directory/file structure
+    const queue = []
+    // Unfortunately items is not iterable i.e. no forEach
+    for (let i = 0; i < items.length; i += 1) {
+      queue.push(items[i].webkitGetAsEntry())
+    }
+    while (queue.length > 0) {
+      const entry = queue.shift()
+      if (entry?.isFile) {
+        // Only append images
+        const file = await getFile(entry)
+        fileEntries.push(file)
+      } else if (entry?.isDirectory) {
+        queue.push(
+          ...(await readAllDirectoryEntries((entry as any).createReader()))
+        )
+      }
+    }
+    return fileEntries
+  }
+
+  // Get all the entries (files or sub-directories) in a directory
+  // by calling readEntries until it returns empty array
+  async function readAllDirectoryEntries(directoryReader: any) {
+    const entries = []
+    let readEntries = await readEntriesPromise(directoryReader)
+    while (readEntries.length > 0) {
+      entries.push(...readEntries)
+      readEntries = await readEntriesPromise(directoryReader)
+    }
+    return entries
+  }
+
+  /* eslint-enable no-await-in-loop */
+
+  // Wrap readEntries in a promise to make working with readEntries easier
+  // readEntries will return only some of the entries in a directory
+  // e.g. Chrome returns at most 100 entries at a time
+  async function readEntriesPromise(directoryReader: any): Promise<any> {
+    return new Promise((resolve, reject) => {
+      directoryReader.readEntries(resolve, reject)
+    })
+  }
+
+  async function handleDrop(ev: React.DragEvent) {
+    ev.preventDefault()
+    const items = await getAllFileEntries(ev.dataTransfer.items)
+    setDragHover(false)
+    onFileSelected(items[0])
+  }
+
+  return (
+    <label
+      htmlFor={uploadElemId}
+      className="block w-full h-full group relative cursor-pointer rounded-md font-medium focus-within:outline-none"
+    >
+      <div
+        className={[
+          'w-full h-full flex items-center justify-center px-6 pt-5 pb-6 text-xl',
+          'border-4 border-dashed rounded-md',
+          'hover:border-black hover:bg-primary',
+          'text-center',
+          dragHover ? 'border-black bg-primary' : 'bg-gray-100 border-gray-300',
+        ].join(' ')}
+        onDrop={handleDrop}
+        onDragOver={ev => {
+          ev.stopPropagation()
+          ev.preventDefault()
+          setDragHover(true)
+        }}
+        onDragLeave={() => setDragHover(false)}
+      >
+        <input
+          id={uploadElemId}
+          name={uploadElemId}
+          type="file"
+          className="sr-only"
+          onChange={ev => {
+            const file = ev.currentTarget.files?.[0]
+            if (file) {
+              onFileSelected(file)
+            }
+          }}
+          accept="image/png, image/jpeg, image/webp"
+        />
+        <p>{m.drop_zone()}</p>
+      </div>
+    </label>
+  )
+}

src/components/Link.tsx

@@ -0,0 +1,13 @@
+interface LinkProps {
+  children: string
+  href: string
+}
+
+export default function Link(props: LinkProps) {
+  const { children, href } = props
+  return (
+    <a href={href} className="font-black underline">
+      {children}
+    </a>
+  )
+}

src/components/Logo.tsx

@@ -0,0 +1,48 @@
+export default function Logo() {
+  return (
+    <svg
+      width="421"
+      height="78"
+      viewBox="0 0 421 78"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M102 61H414" stroke="#BDFF01" strokeWidth="9" />
+      <path
+        d="M127.767 43.728C127.335 45.576 126.591 47.064 125.535 48.192C124.503 49.32 123.243 50.136 121.755 50.64C120.267 51.12 118.611 51.36 116.787 51.36C114.291 51.36 112.131 50.88 110.307 49.92C108.507 48.96 107.115 47.568 106.131 45.744C105.171 43.92 104.691 41.712 104.691 39.12C104.691 36.528 105.171 34.32 106.131 32.496C107.115 30.672 108.507 29.28 110.307 28.32C112.131 27.36 114.291 26.88 116.787 26.88C118.539 26.88 120.171 27.132 121.683 27.636C123.195 28.116 124.467 28.884 125.499 29.94C126.555 30.996 127.251 32.376 127.587 34.08L120.387 36.888C120.195 35.328 119.799 34.32 119.199 33.864C118.623 33.408 117.891 33.18 117.003 33.18C115.755 33.18 114.819 33.66 114.195 34.62C113.571 35.556 113.259 37.056 113.259 39.12C113.259 41.16 113.547 42.66 114.123 43.62C114.723 44.58 115.743 45.06 117.183 45.06C118.047 45.06 118.755 44.808 119.307 44.304C119.859 43.776 120.207 42.948 120.351 41.82L127.767 43.728ZM137.694 25.8V43.836C137.694 44.556 137.802 45.084 138.018 45.42C138.234 45.756 138.618 45.924 139.17 45.924C139.434 45.924 139.662 45.912 139.854 45.888C140.07 45.84 140.274 45.792 140.466 45.744L140.106 50.208C139.65 50.544 138.99 50.82 138.126 51.036C137.286 51.252 136.458 51.36 135.642 51.36C133.41 51.36 131.814 50.88 130.854 49.92C129.894 48.96 129.414 47.352 129.414 45.096V25.8H137.694ZM151.295 51.36C148.031 51.36 145.499 50.544 143.699 48.912C141.899 47.28 140.999 44.976 140.999 42C140.999 40.008 141.407 38.316 142.223 36.924C143.063 35.532 144.227 34.476 145.715 33.756C147.227 33.012 148.979 32.64 150.971 32.64C153.011 32.64 154.739 33.012 156.155 33.756C157.595 34.476 158.687 35.496 159.431 36.816C160.175 38.136 160.547 39.672 160.547 41.424C160.547 41.808 160.523 42.204 160.475 42.612C160.451 43.02 160.415 43.344 160.367 43.584H148.919C149.039 44.52 149.303 45.132 149.711 45.42C150.119 45.708 150.683 45.852 151.403 45.852C152.579 45.852 153.299 45.336 153.563 44.304L160.223 46.104C159.959 47.28 159.371 48.264 158.459 49.056C157.547 49.824 156.455 50.4 155.183 50.784C153.935 51.168 152.639 51.36 151.295 51.36ZM151.007 38.112C150.383 38.112 149.903 38.292 149.567 38.652C149.255 38.988 149.039 39.612 148.919 40.524H152.807C152.735 39.732 152.567 39.132 152.303 38.724C152.039 38.316 151.607 38.112 151.007 38.112ZM172.322 39.768C172.322 38.592 171.806 38.004 170.774 38.004C170.27 38.004 169.85 38.148 169.514 38.436C169.178 38.724 168.986 39.3 168.938 40.164L161.954 39.156C162.122 37.164 162.986 35.58 164.546 34.404C166.106 33.228 168.374 32.64 171.35 32.64C174.47 32.64 176.774 33.276 178.262 34.548C179.774 35.796 180.53 37.452 180.53 39.516V45.096C180.53 46.08 180.998 46.572 181.934 46.572C182.198 46.572 182.402 46.536 182.546 46.464L182.186 50.712C181.298 51.144 180.23 51.36 178.982 51.36C177.59 51.36 176.402 51.12 175.418 50.64C174.434 50.16 173.774 49.428 173.438 48.444C172.958 49.308 172.202 50.016 171.17 50.568C170.138 51.096 168.962 51.36 167.642 51.36C165.746 51.36 164.282 50.94 163.25 50.1C162.242 49.236 161.738 48.06 161.738 46.572C161.738 45.252 162.158 44.184 162.998 43.368C163.838 42.528 165.05 41.952 166.634 41.64L172.322 40.452V39.768ZM169.514 45.348C169.514 45.732 169.634 46.044 169.874 46.284C170.114 46.524 170.45 46.644 170.882 46.644C171.29 46.644 171.626 46.5 171.89 46.212C172.178 45.924 172.322 45.516 172.322 44.988V43.404L170.918 43.728C169.982 43.968 169.514 44.508 169.514 45.348ZM183.73 51V33H191.182L191.362 36.924C191.89 35.556 192.682 34.5 193.738 33.756C194.794 33.012 196.09 32.64 197.626 32.64C199.402 32.64 200.782 33.168 201.766 34.224C202.774 35.28 203.278 36.768 203.278 38.688V51H194.998V40.74C194.998 39.972 194.89 39.456 194.674 39.192C194.458 38.904 194.134 38.76 193.702 38.76C193.102 38.76 192.67 38.976 192.406 39.408C192.142 39.816 192.01 40.512 192.01 41.496V51H183.73ZM228.95 27.24V40.776C228.95 47.832 225.122 51.36 217.466 51.36C209.81 51.36 205.982 47.832 205.982 40.776V27.24H214.406V41.424C214.406 43.848 215.426 45.06 217.466 45.06C219.53 45.06 220.562 43.848 220.562 41.424V27.24H228.95ZM231.683 58.56V33H239.207L239.387 36.6C239.891 35.4 240.623 34.44 241.583 33.72C242.543 33 243.707 32.64 245.075 32.64C247.283 32.64 248.975 33.456 250.151 35.088C251.351 36.696 251.951 38.964 251.951 41.892C251.951 44.892 251.351 47.22 250.151 48.876C248.951 50.532 247.247 51.36 245.039 51.36C243.791 51.36 242.747 51.06 241.907 50.46C241.067 49.836 240.419 49.02 239.963 48.012V58.56H231.683ZM241.727 45.528C242.303 45.528 242.759 45.3 243.095 44.844C243.431 44.364 243.599 43.416 243.599 42C243.599 40.584 243.431 39.636 243.095 39.156C242.759 38.676 242.303 38.436 241.727 38.436C241.175 38.436 240.743 38.724 240.431 39.3C240.119 39.852 239.963 40.752 239.963 42C239.963 44.352 240.551 45.528 241.727 45.528ZM257.901 43.584C259.317 43.584 260.409 43.92 261.177 44.592C261.945 45.264 262.329 46.212 262.329 47.436C262.329 48.66 261.945 49.608 261.177 50.28C260.409 50.952 259.317 51.288 257.901 51.288C256.509 51.288 255.417 50.952 254.625 50.28C253.857 49.608 253.473 48.66 253.473 47.436C253.473 46.212 253.857 45.264 254.625 44.592C255.417 43.92 256.509 43.584 257.901 43.584ZM264.801 58.56V33H272.325L272.505 36.6C273.009 35.4 273.741 34.44 274.701 33.72C275.661 33 276.825 32.64 278.193 32.64C280.401 32.64 282.093 33.456 283.269 35.088C284.469 36.696 285.069 38.964 285.069 41.892C285.069 44.892 284.469 47.22 283.269 48.876C282.069 50.532 280.365 51.36 278.157 51.36C276.909 51.36 275.865 51.06 275.025 50.46C274.185 49.836 273.537 49.02 273.081 48.012V58.56H264.801ZM274.845 45.528C275.421 45.528 275.877 45.3 276.213 44.844C276.549 44.364 276.717 43.416 276.717 42C276.717 40.584 276.549 39.636 276.213 39.156C275.877 38.676 275.421 38.436 274.845 38.436C274.293 38.436 273.861 38.724 273.549 39.3C273.237 39.852 273.081 40.752 273.081 42C273.081 44.352 273.669 45.528 274.845 45.528ZM291.511 31.848C289.879 31.848 288.715 31.584 288.019 31.056C287.347 30.528 287.011 29.64 287.011 28.392C287.011 27.12 287.347 26.232 288.019 25.728C288.715 25.2 289.879 24.936 291.511 24.936C293.143 24.936 294.295 25.2 294.967 25.728C295.663 26.232 296.011 27.12 296.011 28.392C296.011 29.64 295.663 30.528 294.967 31.056C294.295 31.584 293.143 31.848 291.511 31.848ZM295.651 33V51H287.371V33H295.651ZM307.733 32.64C309.941 32.64 311.741 32.952 313.133 33.576C314.525 34.176 315.545 34.944 316.193 35.88C316.865 36.816 317.213 37.776 317.237 38.76L309.605 40.992C309.605 40.032 309.485 39.336 309.245 38.904C309.029 38.448 308.645 38.22 308.093 38.22C307.373 38.22 306.857 38.496 306.545 39.048C306.233 39.6 306.077 40.62 306.077 42.108C306.077 43.14 306.161 43.92 306.329 44.448C306.521 44.976 306.773 45.336 307.085 45.528C307.397 45.696 307.745 45.78 308.129 45.78C309.089 45.78 309.629 44.988 309.749 43.404L317.165 45.708C317.141 46.716 316.757 47.652 316.013 48.516C315.269 49.356 314.225 50.04 312.881 50.568C311.561 51.096 309.989 51.36 308.165 51.36C304.901 51.36 302.345 50.544 300.497 48.912C298.673 47.28 297.761 44.976 297.761 42C297.761 40.008 298.169 38.316 298.985 36.924C299.825 35.532 300.989 34.476 302.477 33.756C303.989 33.012 305.741 32.64 307.733 32.64ZM333.303 33V38.58H328.767V43.656C328.767 44.472 328.935 45.06 329.271 45.42C329.631 45.756 330.183 45.924 330.927 45.924C331.815 45.924 332.571 45.768 333.195 45.456L333.555 50.136C332.955 50.52 332.139 50.82 331.107 51.036C330.075 51.252 329.103 51.36 328.191 51.36C325.671 51.36 323.751 50.88 322.431 49.92C321.135 48.936 320.487 47.28 320.487 44.952V38.58H317.715V33H320.487V29.184L328.767 26.88V33H333.303ZM340.979 51.36C339.107 51.36 337.667 50.88 336.659 49.92C335.651 48.936 335.147 47.352 335.147 45.168V33H343.427V43.26C343.427 43.956 343.535 44.46 343.751 44.772C343.991 45.084 344.339 45.24 344.795 45.24C345.875 45.24 346.415 44.34 346.415 42.54V33H354.695V51H347.243L347.063 47.184C346.007 49.968 343.979 51.36 340.979 51.36ZM357.508 51V33H364.96L365.14 37.5C365.548 36.012 366.172 34.836 367.012 33.972C367.876 33.084 369.016 32.64 370.432 32.64C370.984 32.64 371.404 32.688 371.692 32.784C371.98 32.88 372.184 32.976 372.304 33.072L371.62 39.732C371.404 39.636 371.092 39.552 370.684 39.48C370.276 39.408 369.832 39.372 369.352 39.372C368.272 39.372 367.408 39.624 366.76 40.128C366.112 40.632 365.788 41.376 365.788 42.36V51H357.508ZM383.116 51.36C379.852 51.36 377.32 50.544 375.52 48.912C373.72 47.28 372.82 44.976 372.82 42C372.82 40.008 373.228 38.316 374.044 36.924C374.884 35.532 376.048 34.476 377.536 33.756C379.048 33.012 380.8 32.64 382.792 32.64C384.832 32.64 386.56 33.012 387.976 33.756C389.416 34.476 390.508 35.496 391.252 36.816C391.996 38.136 392.368 39.672 392.368 41.424C392.368 41.808 392.344 42.204 392.296 42.612C392.272 43.02 392.236 43.344 392.188 43.584H380.74C380.86 44.52 381.124 45.132 381.532 45.42C381.94 45.708 382.504 45.852 383.224 45.852C384.4 45.852 385.12 45.336 385.384 44.304L392.044 46.104C391.78 47.28 391.192 48.264 390.28 49.056C389.368 49.824 388.276 50.4 387.004 50.784C385.756 51.168 384.46 51.36 383.116 51.36ZM382.828 38.112C382.204 38.112 381.724 38.292 381.388 38.652C381.076 38.988 380.86 39.612 380.74 40.524H384.628C384.556 39.732 384.388 39.132 384.124 38.724C383.86 38.316 383.428 38.112 382.828 38.112ZM402.666 51.36C400.914 51.36 399.222 51.12 397.59 50.64C395.982 50.16 394.578 49.44 393.378 48.48L396.33 44.196C396.978 44.772 397.83 45.288 398.886 45.744C399.942 46.176 400.998 46.392 402.054 46.392C402.462 46.392 402.822 46.344 403.134 46.248C403.47 46.152 403.638 45.984 403.638 45.744C403.638 45.552 403.542 45.408 403.35 45.312C403.182 45.216 402.798 45.12 402.198 45.024L400.902 44.772C398.286 44.268 396.438 43.548 395.358 42.612C394.278 41.676 393.738 40.416 393.738 38.832C393.738 37.848 394.05 36.888 394.674 35.952C395.322 34.992 396.342 34.2 397.734 33.576C399.126 32.952 400.962 32.64 403.242 32.64C405.114 32.64 406.794 32.88 408.282 33.36C409.77 33.816 410.982 34.452 411.918 35.268L409.074 39.372C408.402 38.844 407.538 38.424 406.482 38.112C405.45 37.776 404.502 37.608 403.638 37.608C403.038 37.608 402.618 37.668 402.378 37.788C402.138 37.884 402.018 38.016 402.018 38.184C402.018 38.352 402.138 38.508 402.378 38.652C402.618 38.796 403.086 38.928 403.782 39.048L406.338 39.48C408.282 39.792 409.698 40.416 410.586 41.352C411.498 42.288 411.954 43.44 411.954 44.808C411.954 45.984 411.63 47.076 410.982 48.084C410.358 49.068 409.362 49.86 407.994 50.46C406.65 51.06 404.874 51.36 402.666 51.36Z"
+        fill="black"
+      />
+      <path
+        d="M32.3784 6C24.8503 12.4687 17.1994 18.7776 9.57114 25.1287C9.21086 25.4287 3.51469 29.0986 7.28323 28.7435C11.1275 28.3813 14.9766 26.7755 18.5431 25.4487C26.9472 22.3224 34.9705 18.3498 43.231 14.8888C45.234 14.0496 47.5435 13.1384 49.6037 12.3525C50.3249 12.0774 51.0159 11.658 51.7838 11.5703C52.1318 11.5306 51.2979 12.0741 51.0171 12.2814C47.8543 14.6172 44.5735 16.8155 41.3384 19.0488C33.1146 24.726 24.783 30.251 16.5667 35.9375C15.472 36.6951 12.3341 38.7486 13.6678 38.6753C16.281 38.5316 19.1152 37.518 21.4899 36.542C29.0864 33.4195 35.8808 28.6199 42.8956 24.4413C46.0358 22.5708 49.2021 20.7546 52.4306 19.0369C55.0217 17.6584 57.9194 15.9401 60.7917 15.114C61.8487 14.81 61.15 15.3907 60.6959 15.8488C57.4898 19.0831 53.7876 22.0277 50.2266 24.8443C40.6129 32.448 30.4389 39.306 20.0644 45.8456C17.3593 47.5508 13.2575 50.0488 10.3138 51.7477C9.42941 52.2582 6.68112 53.6127 7.61863 53.2055C14.5146 50.2101 21.3676 47.122 28.114 43.8071C40.6576 37.6437 52.857 30.8108 65.691 25.2354C67.4153 24.4863 70.7591 23.0521 72.8422 22.3791C74.5883 21.815 73.5446 22.4481 72.5068 23.1732C61.8057 30.6501 50.5857 37.5569 39.4218 44.3286C31.8827 48.9015 24.2212 53.2329 16.1594 56.844C15.0664 57.3336 13.9891 57.8913 12.8293 58.1951C10.964 58.6836 16.4296 56.8193 18.2437 56.1684C24.6432 53.8723 30.8867 51.2692 37.1699 48.6781C49.9855 43.3932 62.8729 38.4374 76.1722 34.4679C78.1078 33.8902 80.0538 33.3477 81.9938 32.7849C82.8974 32.5228 83.4275 32.2167 82.0418 32.8798C79.515 34.0888 78.032 34.972 75.3337 36.5657C64.6559 42.8721 54.1878 49.5186 43.4946 55.801C33.8109 61.4904 23.6948 68.0711 12.9491 71.7535C12.4873 71.9118 11.0878 72.15 11.4877 71.872C14.746 69.6074 20.0543 68.1178 23.5142 66.7402C40.3001 60.0571 56.9851 53.0797 73.8723 46.6515C76.9827 45.4675 84.3981 42.7403 87.8394 41.6738C89.2613 41.2331 96.1589 38.9157 91.2773 42.776C82.9402 49.3687 72.7936 54.14 63.2234 58.6573C59.2228 60.5456 55.316 62.3148 51.1609 63.801C50.0671 64.1922 48.9511 64.5226 47.8308 64.8321C46.6536 65.1573 45.3402 65.0935 44.2612 65.6617C43.2596 66.1892 46.5326 65.6388 47.6631 65.5432C53.7394 65.0292 59.7854 64.2771 65.7868 63.1965C72.0428 62.0701 78.2017 60.5262 84.3417 58.9062"
+        stroke="#BDFF01"
+        strokeWidth="12"
+        strokeLinecap="round"
+      />
+      <path
+        d="M27.119 50.2256L47.4582 28.0373H74.5772L48.6909 65.6341H22.1882L27.119 50.2256Z"
+        fill="white"
+        stroke="black"
+      />
+      <path
+        d="M14.2947 52.6267L7.70887 53.7462C6.95087 53.8756 6.4398 54.5932 6.57013 55.3519C6.63106 55.7295 6.84414 56.0464 7.13358 56.2509C7.42443 56.4591 7.79561 56.5551 8.17544 56.4931L14.7619 55.3727C15.5192 55.2442 16.0316 54.5247 15.903 53.7674C15.7749 53.0076 15.0547 52.5001 14.2947 52.6267Z"
+        fill="black"
+      />
+      <path
+        d="M55.3193 20.5792C55.6276 20.3977 55.8663 20.0982 55.9623 19.7239L57.6224 13.2509C57.8124 12.5073 57.3623 11.7474 56.6197 11.5569C55.8747 11.3666 55.1151 11.8152 54.9257 12.5597L53.2656 19.0327C53.0738 19.7774 53.5247 20.5343 54.2684 20.7267C54.6391 20.821 55.0149 20.7585 55.3193 20.5792Z"
+        fill="black"
+      />
+      <path
+        d="M32.277 23.1873C32.6333 23.8673 33.4747 24.1301 34.1544 23.7727C34.8366 23.4159 35.0983 22.5747 34.7428 21.8934L31.6392 15.9762C31.2805 15.2956 30.4413 15.0324 29.7572 15.3907C29.0755 15.7497 28.8158 16.5893 29.1734 17.2701L32.277 23.1873Z"
+        fill="black"
+      />
+      <path
+        d="M13.4455 34.9526L19.7321 37.2162C20.4539 37.477 21.2501 37.1029 21.5146 36.3781C21.7756 35.6542 21.4004 34.8578 20.6742 34.5966L14.3901 32.331C13.6662 32.0689 12.8697 32.4452 12.6044 33.1676C12.3445 33.8917 12.7216 34.6915 13.4455 34.9526Z"
+        fill="black"
+      />
+      <path
+        d="M76.1485 26.0102C75.8931 25.6802 75.4948 25.4828 75.0771 25.4828H48.1771C47.9337 25.4828 47.7014 25.5502 47.4949 25.6774L47.4478 25.6377L24.7798 49.603L24.5382 49.875L24.5687 49.9064C24.518 49.9949 24.4802 50.0861 24.4553 50.1811L20.2501 65.8743C20.144 66.2772 20.2307 66.7142 20.4824 67.0452C20.7378 67.3753 21.1379 67.5726 21.5538 67.5726H48.4556C48.8862 67.5726 49.2679 67.391 49.6643 66.9945L71.7884 43.5575C71.8603 43.481 72.1074 43.1279 72.1756 42.8743L76.3808 27.1802C76.4887 26.7782 76.402 26.3431 76.1485 26.0102ZM47.4183 64.873H23.312L26.7944 51.8813H50.9007L47.4183 64.873ZM52.2929 49.1817H28.8928L48.7589 28.1824H72.1563L52.2929 49.1817Z"
+        fill="black"
+      />
+    </svg>
+  )
+}

src/components/MadeWidthBadge.tsx

@@ -0,0 +1,72 @@
+export default function MadeWidthBadge() {
+  return (
+    <svg
+      width="101"
+      height="43"
+      viewBox="0 0 101 43"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.158081 28.5402C0.158081 26.12 2.07738 24.1581 4.44495 24.1581H5.62173C6.08596 24.1581 6.46229 24.5428 6.46229 25.0173V25.7907C6.46229 26.2652 6.08596 26.6499 5.62173 26.6499H4.44495C3.47006 26.6499 2.4276 27.5437 2.4276 28.5402V29.7432C2.4276 30.2177 2.05127 30.6024 1.58704 30.6024H0.998643C0.534413 30.6024 0.158081 30.2177 0.158081 29.7432L0.158081 28.5402Z"
+        fill="black"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.6244 35.2423C15.6244 37.6625 13.7051 39.6244 11.3376 39.6244H10.1608C9.69654 39.6244 9.3202 39.2397 9.3202 38.7652V37.9919C9.3202 37.5173 9.69654 37.1326 10.1608 37.1326H11.3376C12.3124 37.1326 13.3549 36.2388 13.3549 35.2423V34.0394C13.3549 33.5648 13.7312 33.1801 14.1955 33.1801H14.7839C15.2481 33.1801 15.6244 33.5648 15.6244 34.0394V35.2423Z"
+        fill="black"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.3376 24.1581C13.7051 24.1581 15.6244 26.12 15.6244 28.5402V29.7432C15.6244 30.2177 15.2481 30.6024 14.7839 30.6024H14.0274C13.5631 30.6024 13.1868 30.2177 13.1868 29.7432V28.5402C13.1868 27.5437 12.3124 26.478 11.3376 26.478H10.1608C9.69654 26.478 9.3202 26.0934 9.3202 25.6188V25.0173C9.3202 24.5428 9.69654 24.1581 10.1608 24.1581L11.3376 24.1581Z"
+        fill="black"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.44495 39.6244C2.07738 39.6244 0.158081 37.6625 0.158081 35.2423L0.158082 34.0394C0.158082 33.5648 0.534414 33.1801 0.998643 33.1801H1.75515C2.21938 33.1801 2.59571 33.5648 2.59571 34.0394L2.59571 35.2423C2.59571 36.2388 3.47006 37.3045 4.44495 37.3045L5.62173 37.3045C6.08596 37.3045 6.46229 37.6892 6.46229 38.1637V38.7652C6.46229 39.2397 6.08596 39.6244 5.62173 39.6244L4.44495 39.6244Z"
+        fill="black"
+      />
+      <path
+        d="M36.6965 29.5082C36.289 26.5653 34.0253 24.8578 31.0888 24.8578C27.6285 24.8578 25.0219 27.3802 25.0219 31.662C25.0219 35.9373 27.5961 38.4663 31.0888 38.4663C34.2387 38.4663 36.3279 36.4289 36.6965 33.8999L34.2775 33.887C33.9735 35.4393 32.7058 36.3125 31.1212 36.3125C28.9738 36.3125 27.4345 34.7019 27.4345 31.662C27.4345 28.6738 28.9609 27.0116 31.1276 27.0116C32.7382 27.0116 33.9994 27.9236 34.2775 29.5082H36.6965Z"
+        fill="black"
+      />
+      <path
+        d="M41.1319 25.0389H38.7905V38.2852H41.1319V25.0389Z"
+        fill="black"
+      />
+      <path
+        d="M43.5396 38.2852H45.881V28.3504H43.5396V38.2852ZM44.7168 26.9404C45.4606 26.9404 46.0686 26.3712 46.0686 25.6727C46.0686 24.9677 45.4606 24.3985 44.7168 24.3985C43.9665 24.3985 43.3585 24.9677 43.3585 25.6727C43.3585 26.3712 43.9665 26.9404 44.7168 26.9404Z"
+        fill="black"
+      />
+      <path
+        d="M48.2887 42.0107H50.6301V36.7199H50.7271C51.0958 37.4443 51.8654 38.4598 53.573 38.4598C55.9144 38.4598 57.6672 36.6035 57.6672 33.3307C57.6672 30.0192 55.8626 28.2211 53.5665 28.2211C51.8137 28.2211 51.0828 29.2754 50.7271 29.9933H50.5913V28.3504H48.2887V42.0107ZM50.5848 33.3178C50.5848 31.3904 51.4127 30.1421 52.9197 30.1421C54.4785 30.1421 55.2805 31.468 55.2805 33.3178C55.2805 35.1806 54.4656 36.5388 52.9197 36.5388C51.4256 36.5388 50.5848 35.2453 50.5848 33.3178Z"
+        fill="black"
+      />
+      <path
+        d="M64.2645 38.2852C68.3005 38.2852 70.6936 35.7886 70.6936 31.6491C70.6936 27.5225 68.3005 25.0389 64.355 25.0389H59.7757V38.2852H64.2645ZM62.1753 36.209V27.1151H64.2192C66.9099 27.1151 68.3134 28.6156 68.3134 31.6491C68.3134 34.6955 66.9099 36.209 64.1481 36.209H62.1753Z"
+        fill="black"
+      />
+      <path
+        d="M72.8701 38.2852H75.2115V32.4446C75.2115 31.1834 76.1622 30.2908 77.4494 30.2908C77.8439 30.2908 78.3355 30.362 78.536 30.4266V28.2728C78.3225 28.234 77.9539 28.2081 77.6951 28.2081C76.5568 28.2081 75.606 28.8549 75.2438 30.0062H75.1403V28.3504H72.8701V38.2852Z"
+        fill="black"
+      />
+      <path
+        d="M84.0159 38.4792C86.9265 38.4792 88.7763 36.4289 88.7763 33.3566C88.7763 30.2779 86.9265 28.2211 84.0159 28.2211C81.1054 28.2211 79.2555 30.2779 79.2555 33.3566C79.2555 36.4289 81.1054 38.4792 84.0159 38.4792ZM84.0289 36.6035C82.4183 36.6035 81.6293 35.1676 81.6293 33.3501C81.6293 31.5327 82.4183 30.0774 84.0289 30.0774C85.6135 30.0774 86.4026 31.5327 86.4026 33.3501C86.4026 35.1676 85.6135 36.6035 84.0289 36.6035Z"
+        fill="black"
+      />
+      <path
+        d="M90.7636 42.0107H93.105V36.7199H93.202C93.5707 37.4443 94.3404 38.4598 96.0479 38.4598C98.3893 38.4598 100.142 36.6035 100.142 33.3307C100.142 30.0192 98.3375 28.2211 96.0414 28.2211C94.2886 28.2211 93.5577 29.2754 93.202 29.9933H93.0662V28.3504H90.7636V42.0107ZM93.0597 33.3178C93.0597 31.3904 93.8876 30.1421 95.3946 30.1421C96.9534 30.1421 97.7554 31.468 97.7554 33.3178C97.7554 35.1806 96.9405 36.5388 95.3946 36.5388C93.9005 36.5388 93.0597 35.2453 93.0597 33.3178Z"
+        fill="black"
+      />
+      <path
+        d="M1.03871 3.54545V13H2.39595V6.15376H2.48366L5.27202 12.9862H6.39844L9.18679 6.15838H9.2745V13H10.6317V3.54545H8.90057L5.89062 10.8949H5.77983L2.76989 3.54545H1.03871ZM14.6585 13.157C15.8311 13.157 16.4912 12.5614 16.7544 12.0305H16.8097V13H18.1578V8.29119C18.1578 6.22763 16.5328 5.81676 15.4063 5.81676C14.123 5.81676 12.9411 6.33381 12.4795 7.62642L13.7767 7.92188C13.9798 7.41868 14.4969 6.93395 15.4248 6.93395C16.3158 6.93395 16.7728 7.40021 16.7728 8.20348V8.2358C16.7728 8.73899 16.2558 8.72976 14.9816 8.87749C13.6382 9.03445 12.2625 9.3853 12.2625 10.9964C12.2625 12.3906 13.3105 13.157 14.6585 13.157ZM14.9585 12.049C14.1784 12.049 13.6151 11.6982 13.6151 11.0149C13.6151 10.2763 14.2707 10.0131 15.0693 9.90696C15.5171 9.84695 16.5789 9.72692 16.7774 9.52841V10.4425C16.7774 11.2827 16.108 12.049 14.9585 12.049ZM22.6507 13.1385C23.9434 13.1385 24.4512 12.3491 24.7005 11.8967H24.8159V13H26.1639V3.54545H24.7836V7.05859H24.7005C24.4512 6.62003 23.9803 5.81676 22.66 5.81676C20.9473 5.81676 19.687 7.16939 19.687 9.46839C19.687 11.7628 20.9288 13.1385 22.6507 13.1385ZM22.9554 11.9613C21.7228 11.9613 21.0811 10.8764 21.0811 9.45455C21.0811 8.04652 21.709 6.98935 22.9554 6.98935C24.1603 6.98935 24.8066 7.97266 24.8066 9.45455C24.8066 10.9457 24.1465 11.9613 22.9554 11.9613ZM31.1901 13.1431C32.7366 13.1431 33.8307 12.3814 34.1446 11.2273L32.8382 10.9918C32.5889 11.6612 31.9887 12.0028 31.2039 12.0028C30.0221 12.0028 29.2281 11.2365 29.1911 9.87003H34.2323V9.38068C34.2323 6.81854 32.6997 5.81676 31.0931 5.81676C29.1173 5.81676 27.8154 7.32173 27.8154 9.50071C27.8154 11.7028 29.0988 13.1431 31.1901 13.1431ZM29.1958 8.83594C29.2512 7.82955 29.9806 6.95703 31.1024 6.95703C32.1734 6.95703 32.8751 7.75107 32.8797 8.83594H29.1958ZM40.7416 13H42.145L43.5853 7.88033H43.6915L45.1318 13H46.5399L48.6219 5.90909H47.1954L45.8151 11.0934H45.7458L44.3609 5.90909H42.9344L41.5402 11.1165H41.471L40.0814 5.90909H38.6549L40.7416 13ZM49.9318 13H51.3121V5.90909H49.9318V13ZM50.6289 4.81499C51.1044 4.81499 51.5014 4.44567 51.5014 3.99325C51.5014 3.54084 51.1044 3.1669 50.6289 3.1669C50.1488 3.1669 49.7564 3.54084 49.7564 3.99325C49.7564 4.44567 50.1488 4.81499 50.6289 4.81499ZM56.4791 5.90909H55.0249V4.21023H53.6446V5.90909H52.6059V7.01705H53.6446V11.2042C53.64 12.4922 54.6233 13.1154 55.7128 13.0923C56.1514 13.0877 56.4468 13.0046 56.6084 12.9446L56.3591 11.8043C56.2668 11.8228 56.096 11.8643 55.8744 11.8643C55.4266 11.8643 55.0249 11.7166 55.0249 10.918V7.01705H56.4791V5.90909ZM59.5387 8.78977C59.5387 7.65874 60.2543 7.01243 61.2376 7.01243C62.1886 7.01243 62.7564 7.61719 62.7564 8.65589V13H64.1367V8.4897C64.1367 6.72159 63.1673 5.81676 61.7085 5.81676C60.6051 5.81676 59.9403 6.29688 59.608 7.06321H59.5202V3.54545H58.1584V13H59.5387V8.78977ZM75.1389 13.1477L79.8847 8.40199C81.0203 7.26633 81.0111 5.39204 79.8847 4.28409C78.7306 3.14844 76.9255 3.15767 75.7668 4.28409L75.1389 4.89347L74.5111 4.28409C73.3524 3.15767 71.5473 3.14844 70.3932 4.28409C69.2668 5.39204 69.2575 7.26633 70.3932 8.40199L75.1389 13.1477ZM86.2623 13H87.6104V11.8967H87.7258C87.9751 12.3491 88.4829 13.1385 89.7755 13.1385C91.4928 13.1385 92.7393 11.7628 92.7393 9.46839C92.7393 7.16939 91.4743 5.81676 89.7616 5.81676C88.4459 5.81676 87.9704 6.62003 87.7258 7.05859H87.6427V3.54545H86.2623V13ZM87.615 9.45455C87.615 7.97266 88.2613 6.98935 89.4662 6.98935C90.7172 6.98935 91.3451 8.04652 91.3451 9.45455C91.3451 10.8764 90.6988 11.9613 89.4662 11.9613C88.2797 11.9613 87.615 10.9457 87.615 9.45455ZM94.9078 15.6591C96.0481 15.6591 96.7683 15.0636 97.1792 13.9464L100.111 5.92294L98.6195 5.90909L96.8237 11.4119H96.7498L94.954 5.90909H93.4767L96.0712 13.0923L95.9004 13.5632C95.5495 14.505 95.0556 14.5835 94.2985 14.3757L93.9661 15.5067C94.1323 15.5806 94.4924 15.6591 94.9078 15.6591Z"
+        fill="black"
+      />
+    </svg>
+  )
+}

src/components/Modal.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react'
+
+interface ModalProps {
+  children?: ReactNode
+}
+
+export default function Modal(props: ModalProps) {
+  const { children } = props
+  return (
+    <div
+      className={[
+        'absolute w-full h-full flex justify-center items-center',
+        'bg-white bg-opacity-40 backdrop-filter backdrop-blur-md',
+      ].join(' ')}
+    >
+      <div className="bg-primary p-16 max-w-4xl">{children}</div>
+    </div>
+  )
+}

src/components/Progress.tsx

@@ -0,0 +1,17 @@
+interface ProgressProps {
+  percent: number
+}
+
+export default function Progress({ percent }: ProgressProps) {
+  return (
+    <div className="w-full flex items-center">
+      <div className="relative flex-1 bg-black/20 h-2 mr-4">
+        <div
+          className="absolute left-0 top-0 h-full bg-black duration-100"
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+      <span className="w-20 text-right">{percent.toFixed(2)}%</span>
+    </div>
+  )
+}

src/components/Slider.tsx

@@ -0,0 +1,34 @@
+type SliderProps = {
+  label?: any
+  value?: number
+  min?: number
+  max?: number
+  onChange: (value: number) => void
+  onStart?: () => void
+}
+
+export default function Slider(props: SliderProps) {
+  const { value, label, min, max, onChange, onStart } = props
+
+  const step = ((max || 100) - (min || 0)) / 100
+
+  return (
+    <div className="inline-flex items-center space-x-4 text-black">
+      <span>{label}</span>
+      <input
+        className={['appearance-none rounded-lg h-4', 'bg-primary'].join(' ')}
+        type="range"
+        step={step}
+        min={min}
+        max={max}
+        value={value}
+        onPointerDown={onStart}
+        onChange={ev => {
+          ev.preventDefault()
+          ev.stopPropagation()
+          onChange(parseInt(ev.currentTarget.value, 10))
+        }}
+      />
+    </div>
+  )
+}

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/index.tsx

@@ -0,0 +1,8 @@
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import { loadingOnnxruntime } from './adapters/util'
+
+loadingOnnxruntime()
+
+ReactDOM.render(<App />, document.getElementById('root'))

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'

src/utils.ts

@@ -0,0 +1,159 @@
+import { useCallback, useEffect, useState } from 'react'
+
+export function dataURItoBlob(dataURI: string) {
+  const mime = dataURI.split(',')[0].split(':')[1].split(';')[0]
+  const binary = atob(dataURI.split(',')[1])
+  const array = []
+  for (let i = 0; i < binary.length; i += 1) {
+    array.push(binary.charCodeAt(i))
+  }
+  return new Blob([new Uint8Array(array)], { type: mime })
+}
+
+// const dataURItoBlob = (dataURI: string) => {
+//   const bytes =
+//     dataURI.split(',')[0].indexOf('base64') >= 0
+//       ? atob(dataURI.split(',')[1])
+//       : unescape(dataURI.split(',')[1])
+//   const mime = dataURI.split(',')[0].split(':')[1].split(';')[0]
+//   const max = bytes.length
+//   const ia = new Uint8Array(max)
+//   for (var i = 0; i < max; i++) ia[i] = bytes.charCodeAt(i)
+//   return new Blob([ia], { type: mime })
+// }
+
+export function downloadImage(uri: string, name: string) {
+  const link = document.createElement('a')
+  link.href = uri
+  link.download = name
+
+  // this is necessary as link.click() does not work on the latest firefox
+  link.dispatchEvent(
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    })
+  )
+
+  setTimeout(() => {
+    // For Firefox it is necessary to delay revoking the ObjectURL
+    // window.URL.revokeObjectURL(base64)
+    link.remove()
+  }, 100)
+}
+
+export function loadImage(image: HTMLImageElement, src: string) {
+  return new Promise((resolve, reject) => {
+    const initSRC = image.src
+    const img = image
+    img.onload = resolve
+    img.onerror = err => {
+      img.src = initSRC
+      reject(err)
+    }
+    img.src = src
+  })
+}
+
+export function useImage(
+  file: Blob | MediaSource
+): [HTMLImageElement, boolean, (width: number, height: number) => void] {
+  const [image, setImage] = useState(new Image())
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  // 调整图像分辨率的函数
+  const adjustResolution = useCallback(
+    (width, height) => {
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')!
+      canvas.width = width
+      canvas.height = height
+      context.drawImage(image, 0, 0, width, height)
+      const resizedImage = new Image()
+      resizedImage.src = canvas.toDataURL()
+      setImage(resizedImage)
+    },
+    [image]
+  )
+
+  useEffect(() => {
+    const newImage = new Image()
+    newImage.onload = () => {
+      setIsLoaded(true)
+    }
+    newImage.src = URL.createObjectURL(file)
+    setImage(newImage)
+
+    return () => {
+      newImage.onload = null
+    }
+  }, [file])
+
+  return [image, isLoaded, adjustResolution]
+}
+
+// https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload
+interface ResizeImageFileResult {
+  file: File
+  resized: boolean
+  originalWidth?: number
+  originalHeight?: number
+}
+export function resizeImageFile(
+  file: File,
+  maxSize: number
+): Promise<ResizeImageFileResult> {
+  const reader = new FileReader()
+  const image = new Image()
+  const canvas = document.createElement('canvas')
+
+  const resize = (): ResizeImageFileResult => {
+    let { width, height } = image
+
+    if (width > height) {
+      if (width > maxSize) {
+        height *= maxSize / width
+        width = maxSize
+      }
+    } else if (height > maxSize) {
+      width *= maxSize / height
+      height = maxSize
+    }
+
+    if (width === image.width && height === image.height) {
+      return { file, resized: false }
+    }
+
+    canvas.width = width
+    canvas.height = height
+    const ctx = canvas.getContext('2d')
+    if (!ctx) {
+      throw new Error('could not get context')
+    }
+    canvas.getContext('2d')?.drawImage(image, 0, 0, width, height)
+    const dataUrl = canvas.toDataURL('image/jpeg')
+    const blob = dataURItoBlob(dataUrl)
+    const f = new File([blob], file.name, {
+      type: file.type,
+    })
+    return {
+      file: f,
+      resized: true,
+      originalWidth: image.width,
+      originalHeight: image.height,
+    }
+  }
+
+  return new Promise((resolve, reject) => {
+    if (!file.type.match(/image.*/)) {
+      reject(new Error('Not an image'))
+      return
+    }
+    reader.onload = (readerEvent: any) => {
+      image.onload = () => resolve(resize())
+      image.src = readerEvent.target.result
+    }
+    reader.readAsDataURL(file)
+  })
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tailwind.config.js

@@ -0,0 +1,18 @@
+const tailwindScrollbar = require('tailwind-scrollbar')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {
+      animation: {
+        'pulse-fast': 'pulse 0.7s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      },
+      colors: {
+        primary: '#BDFF01',
+      },
+    },
+  },
+  variants: {},
+  plugins: [tailwindScrollbar],
+}

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vite-plugin-svgr/client"]
+  },
+  "include": ["src"]
+}

vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react-swc'
+import eslintPlugin from 'vite-plugin-eslint'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/',
+  plugins: [react(), eslintPlugin()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/setupTests.ts',
+    css: true,
+    reporters: ['verbose'],
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*'],
+      exclude: [],
+    },
+  },
+  server: {
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    },
+  },
+})