css update

This reverts commit 3e335e72e3.

.gitea/workflows/publish.yaml

@@ -0,0 +1,14 @@
+on:
+  push:
+    tags:
+      - "*"
+  
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - run: npm ci
+      - run: npx wrangler deploy
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.gitignore

@@ -1 +1,3 @@
-/_*
+node_modules
+.wrangler
+assets/*.js*

.npmrc

@@ -0,0 +1 @@
+@sugoidogo:registry=https://gitea.sugoidogo.com/api/packages/sugoidogo/npm/

LICENCE.md

@@ -0,0 +1,651 @@
+GNU Affero General Public License
+=================================
+
+_Version 3, 19 November 2007_
+_Copyright © 2007 Free Software Foundation, Inc. &lt;<http://fsf.org/>&gt;_
+
+Everyone is permitted to copy and distribute verbatim copies
+of this license document, but changing it is not allowed.
+
+## Preamble
+
+The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are 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.
+
+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.
+
+Developers that use our General Public Licenses protect your rights
+with two steps: **(1)** assert copyright on the software, and **(2)** offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+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 Affero 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. Remote Network Interaction; Use with the GNU General Public License
+
+Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+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 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 work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+### 14. Revised Versions of this License
+
+The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero 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 Affero 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 Affero 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 Affero 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 Affero 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 Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a “Source” link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+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 AGPL, see
+&lt;<http://www.gnu.org/licenses/>&gt;.

README.md

@@ -0,0 +1,11 @@
+# PNGTube
+OBS Browser Source for creating an image based avatar that animates to audio input. Useful for PNG-tubing or as a TTS avatar.
+## Usage
+1. Open OBS
+2. Check your OBS version by reading the window title
+    - If it's under 27 (26 or lower), you need to update OBS
+    - If it's 27, close OBS and install the [OBS Websocket Plugin](https://github.com/obsproject/obs-websocket/releases/tag/5.0.1)
+    - If it's over 27 (28 or higher), you can skip this step
+2. With OBS open, visit the [PNGTube Setup Page](https://pngtube.sugoidogo.com/) and authorize OBS.
+3. After configuring all your settings, hit 'Save & Download' to get your avatar.
+You can drag & drop this file into your scene in OBS, or create a browser source, check the 'Local file' option, and select your avatar.

assets/blink.html

@@ -0,0 +1,30 @@
+<style>
+    body {
+        --blink-min: 1;
+        --blink-max: 10;
+        --blink-time: 0.1;
+    }
+
+    #active-blink.blink.active,
+    #idle-blink.blink:not(.active) {
+        opacity: 1;
+    }
+</style>
+<script type="module">
+    (function blink(){
+        const style=getComputedStyle(document.body)
+        const min=+style.getPropertyValue('--blink-min')
+        const max=+style.getPropertyValue('--blink-max')
+        const time=+style.getPropertyValue('--blink-time')
+        console.debug(min,max,time)
+        for(const element of document.querySelectorAll('*')){
+            element.classList.add('blink')
+        }
+        setTimeout(()=>{
+            for(const element of document.querySelectorAll('*')){
+                element.classList.remove('blink')
+            }
+        },time*1000)
+        setTimeout(blink, (Math.random() * (max - min) + min)*1000)
+    })()
+</script>

assets/bounce.css

@@ -0,0 +1,25 @@
+img {
+    --bounce-height: 5%;
+    height: calc(100% - var(--bounce-height));
+    bottom: 0%;
+}
+
+.active {
+    animation: bounce 0.5s;
+}
+
+@keyframes bounce {
+    0% {
+        bottom: 0%;
+        animation-timing-function: ease-out;
+    }
+
+    50% {
+        bottom: var(--bounce-height);
+        animation-timing-function: ease-in;
+    }
+
+    100% {
+        bottom: 0%;
+    }
+}

assets/brightness.css

@@ -0,0 +1,3 @@
+#idle, #idle-blink {
+    filter: brightness(50%);
+}

assets/default.json

@@ -0,0 +1,36 @@
+{
+    "assets":[
+        {
+            "id":"active",
+            "url":"tubie/active.png"
+        },
+        {
+            "id": "active-blink",
+            "url": "tubie/active-blink.png"
+        },
+        {
+            "id": "idle",
+            "url": "tubie/idle.png"
+        },
+        {
+            "id": "idle-blink",
+            "url": "tubie/idle-blink.png"
+        },
+        {
+            "id":"bounce_animation",
+            "url":"bounce.css"
+        },
+        {
+            "id":"idle_half_brightness",
+            "url":"brightness.css"
+        },
+        {
+            "id":"blink_animation",
+            "url":"blink.html"
+        }
+    ],
+    "sources":[
+        "Mic/Aux"
+    ],
+    "obs_token":"ws://localhost:4455"
+}

assets/hide.css

@@ -0,0 +1,13 @@
+img {
+    bottom:-100%;
+    transition-property: bottom;
+    transition-duration: 0.5s;
+    transition-delay: 1s;
+    transition-timing-function: ease-in;
+}
+
+img.active{
+    bottom:0%;
+    transition-delay: 0s;
+    transition-timing-function: ease-out;
+}

assets/index.html

@@ -0,0 +1,131 @@
+<head>
+    <link rel="icon" href="data:image/png;base64,iVBORw0KGgo=">
+    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" />
+    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-dark.css"
+        media="screen and (prefers-color-scheme: dark)" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<h1>PNGTube</h1>
+<select id="instance" hidden></select>
+<form name="new_instance" hidden>
+    <input type="text" name="instance_name" required>
+    <button type="submit">Create new instance</button>
+</form>
+<form name="instance_config" hidden>
+    <button type="button" id="remove_instance">Delete</button>
+    <br>
+    <table>
+        <tr>
+            <td>
+                <h2>Assets</h2>
+                <div id="asset_warning" hidden>
+                    Possible missing assets:
+                    <ul id="missing_assets"></ul>
+                    Make sure all your assets have been added,
+                    <br>
+                    and their id's are set correctly below.
+                    <br>
+                    If you have already done so, ignore this warning.
+                    <br><br>
+                </div>
+                <input type="file" id="asset_file_input" multiple>
+                <ul id="asset_list"></ul>
+            </td>
+            <td>
+                <h2>Activation</h2>
+                <div id="obs_config">
+                    <span id="obs_status">Connecting to OBS...</span>
+                    <input type="hidden" name="obs_token">
+                    <button type="button" id="obs_auth">Get OBS Authorization</button>
+                </div>
+                <br>
+                <button type="button" id="add_source">Add Source</button>
+                <ul id="source_list"></ul>
+            </td>
+            <td id="instructions">
+                <h3>Adjusting Sensitivity</h3>
+                <table>
+                    <thead>
+                        <tr>
+                            <td colspan="2">Noise Gate Settings</td>
+                        </tr>
+                    </thead>
+                    <tr>
+                        <td>Close Threshold</td>
+                        <td>Idle volume level</td>
+                    </tr>
+                    <tr>
+                        <td>Open Threshold</td>
+                        <td>Active volume level</td>
+                    </tr>
+                    <tr>
+                        <td>Hold Time</td>
+                        <td>How long to hold before switching back to idle</td>
+                    </tr>
+                </table>
+                <br>
+                PNGTube will consider your audio sources 'active'
+                if there is any sound coming through at all.
+                The volume meters in OBS won't show sounds quieter than -60db,
+                so even if you think it's silent,
+                most audio devices have some static noise in them.
+                The "Adjust Sensitivity" button on the left will open the filter panel,
+                and add a noise gate if you don't have one already.
+            </td>
+        </tr>
+    </table>
+    <div id="status">Loading...</div>
+    <button type="submit">Save & Download</button>
+</form>
+
+<datalist id="element_references"></datalist>
+
+<datalist id="obs_sources"></datalist>
+
+<span id="templates" hidden>
+    <li class="asset">
+        <form name="assets">
+            <button type="button" onclick="this.parentElement.parentElement.remove()">remove</button>
+            <input type="search" name="id" required pattern="[\w-]+" list="element_references">
+            <span id="filename"></span>
+            <input type="hidden" name="url">
+        </form>
+    </li>
+    <li class="source">
+        <button type="button" onclick="this.parentElement.remove()">remove</button>
+        <input type="search" name="sources" list="obs_sources" required pattern=".+">
+        <br>
+        <button type="button" class="sensitivity">Adjust Sensitivity</button>
+    </li>
+</span>
+
+<style>
+    body {
+        margin: 0;
+    }
+    form[name=new_instance]:not([hidden]),
+    form[name=instance_config]:not([hidden]){
+        display: inline;
+    }
+    td {
+        border: 1px solid lightgray;
+        vertical-align: top;
+        white-space: nowrap;
+        width: fit-content;
+    }
+    #instructions {
+        white-space: normal;
+        width: 20em;
+    }
+    button#add_source,
+    button.sensitivity {
+        width: 100%;
+    }
+    .source {
+        margin: 10px;
+    }
+    form, input[type=search] {
+        margin-bottom: 0;
+    }
+</style>
+<script type="module" src="index.js"></script>

assets/overlay.html

@@ -0,0 +1,24 @@
+<style>
+    body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    img {
+        position: absolute;
+        bottom: 0%;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        opacity: 0;
+    }
+
+    #idle:not(.active) {
+        opacity: 1;
+    }
+
+    #active.active {
+        opacity: 1;
+    }
+</style>

index.html

@@ -1,266 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <title>PNGTuber</title>
-</head>
-<div id="imgdiv">
-  <img id="img"></img>
-</div>
-<div id="controls">
-  <img id="logo" src="logo.png" />
-  <p>Volume threshold</p>
-  <input type="range" id="volume-range" min="1" max="100" oninput="onVolumeRange(this.value)" />
-  <input type="number" id="volume-number" min="1" max="100" oninput="onVolumeNumber(this.value)" />
-  <p>Idle brightness</p>
-  <input type="range" id="brightness-range" min="1" max="100" oninput="onBrightnessRange(this.value)" />
-  <input type="number" id="brightness-number" min="1" max="100" oninput="onBrightnessNumber(this.value)" />
-  <p>Transition time</p>
-  <input type="range" id="time-range" min="0" max="1" step="0.01" oninput="onTimeRange(this.value)" />
-  <input type="number" id="time-number" min="0" max="1" step="0.01" oninput="onTimeNumber(this.value)" />
-  <p>Jump height</p>
-  <input type="range" id="height-range" min="0" max="100" oninput="onHeightRange(this.value)" />
-  <input type="number" id="height-number" min="0" max="100" oninput="onHeightNumber(this.value)" />
-  <p>Idle image</p>
-  <input type="file" accept="image/*" oninput="setIdle(this.files[0])" />
-  <p>Talking image</p>
-  <input type="file" accept="image/*" oninput="setTalking(this.files[0])" />
-</div>
-<style>
-  * {
-    font-size: 4vmin;
-    font-family: Arial, Helvetica, sans-serif;
-    margin: 0px;
-  }
-
-  #img {
-    position: absolute;
-    max-width: 100vw;
-    max-height: 100vh;
-    transition-duration: 0.2s;
-  }
-
-  #imgdiv {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  #controls:hover {
-    opacity: 1;
-  }
-
-  #controls {
-    width: 99vw;
-    height: 99vh;
-    position: absolute;
-    top: 0px;
-    background-color: rgba(127, 127, 127, 0.5);
-    opacity: 0;
-  }
-
-  #logo {
-    max-width: 100vw;
-    max-height: 25vh;
-  }
-
-  input[type=range] {
-    width: 75vw;
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  input[type=range]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 1vw;
-    height: 3vh;
-    background-color: black;
-  }
-
-  input[type=range]::-webkit-slider-runnable-track {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 75vw;
-    height: 3vh;
-    background-color: white;
-  }
-
-  #volume-range {
-    --volume: 0%;
-    position: relative;
-    width: 75vw;
-    height: 3vh;
-    background-color: white;
-  }
-
-  #volume-range::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: var(--volume);
-    background-color: rgba(0, 255, 0, 0.5);
-    transition: width 100ms linear;
-  }
-</style>
-<script src="https://localforage.github.io/localForage/localforage.min.js"></script>
-<script>
-  const VOLUME = "volume";
-  const VOLUME_RANGE = document.getElementById("volume-range");
-  const VOLUME_NUMBER = document.getElementById("volume-number");
-  const BRIGHTNESS = "brightness";
-  const BRIGHTNESS_RANGE = document.getElementById("brightness-range");
-  const BRIGHTNESS_NUMBER = document.getElementById("brightness-number");
-  const TIME="time";
-  const TIME_RANGE=document.getElementById("time-range");
-  const TIME_NUMBER=document.getElementById("time-number");
-  const HEIGHT="height";
-  const HEIGHT_RANGE=document.getElementById("height-range");
-  const HEIGHT_NUMBER=document.getElementById("height-number");
-  const IDLE_IMAGE = "idle-image";
-  const TALKING_IMAGE = "talking-image";
-  const IMAGE = document.getElementById("img");
-  const DEFAULT_VOLUME = 50;
-  const DEFAULT_BRIGHTNESS = 90;
-  const DEFAULT_TIME=0.2;
-  const DEFAULT_HEIGHT=5;
-  const DEFAULT_IDLE = "";
-  const DEFAULT_TALKING = "";
-  const LEGACY_BRIGHTNESS = "darkness";
-  const LEGACY_IDLE = "closed";
-  const LEGACY_TALKING = "open";
-  const storage = localforage;
-
-  let volume;
-  let brightness;
-  let time;
-  let idle;
-  let talking;
-  let height;
-
-  function setHeight(input){
-    height=input;
-    IMAGE.style.maxHeight=(100-height)+"vh";
-    IMAGE.style.top=height+"vh";
-  }
-
-  function setTime (input) {
-    document.getElementById("img").style.transitionDuration=input+'s';
-    time=input;
-  }
-
-  function setIdle(input) {
-    const reader = new FileReader();
-    reader.addEventListener("load", function () {
-      idle = reader.result;
-      storage.setItem(IDLE_IMAGE, reader.result);
-    }, false);
-    reader.readAsDataURL(input);
-  }
-
-  function setTalking(input) {
-    const reader = new FileReader();
-    reader.addEventListener("load", function () {
-      talking = reader.result;
-      storage.setItem(TALKING_IMAGE, reader.result);
-    }, false);
-    reader.readAsDataURL(input);
-  }
-
-  function onVolumeRange(input) {
-    volume = input;
-    VOLUME_NUMBER.value = input;
-    storage.setItem(VOLUME, input);
-  }
-
-  function onVolumeNumber(input) {
-    volume = input;
-    VOLUME_RANGE.value = input;
-    storage.setItem(VOLUME, input);
-  }
-
-  function onBrightnessRange(input) {
-    brightness = input;
-    BRIGHTNESS_NUMBER.value = input;
-    storage.setItem(BRIGHTNESS, input);
-  }
-
-  function onBrightnessNumber(input) {
-    brightness = input;
-    BRIGHTNESS_RANGE.value = input;
-    storage.setItem(BRIGHTNESS, input);
-  }
-
-  function onTimeRange(input) {
-    setTime(input);
-    TIME_NUMBER.value=input;
-    storage.setItem(TIME, input);
-  }
-
-  function onTimeNumber(input){
-    setTime(input);
-    TIME_RANGE.value=input;
-    storage.setItem(TIME, input);
-  }
-
-  function onHeightRange(input){
-    setHeight(input);
-    HEIGHT_NUMBER.value=input;
-    storage.setItem(HEIGHT,input);
-  }
-
-  function onHeightNumber(input){
-    setHeight(input);
-    HEIGHT_RANGE.value=input;
-    storage.setItem(HEIGHT,input);
-  }
-
-  window.onload = async function () {
-    try {
-      volume = await storage.getItem(VOLUME) || DEFAULT_VOLUME;
-      brightness = await storage.getItem(BRIGHTNESS) || DEFAULT_BRIGHTNESS;
-      idle = await storage.getItem(IDLE_IMAGE) || DEFAULT_IDLE;
-      talking = await storage.getItem(TALKING_IMAGE) || DEFAULT_TALKING;
-
-      setHeight(await storage.getItem(HEIGHT) || DEFAULT_HEIGHT);
-      setTime(await storage.getItem(TIME) || DEFAULT_TIME);
-
-      VOLUME_RANGE.value = volume;
-      VOLUME_NUMBER.value = volume;
-      BRIGHTNESS_RANGE.value = brightness;
-      BRIGHTNESS_NUMBER.value = brightness;
-      TIME_RANGE.value=time;
-      TIME_NUMBER.value=time;
-      HEIGHT_NUMBER.value=height;
-      HEIGHT_RANGE.value=height;
-      IMAGE.src = idle;
-
-      const volumeVisualizer = document.getElementById("volume-range");
-      const volumeCallback = async function(averageVolume) {
-        averageVolume=parseInt(averageVolume.data)
-        console.log(averageVolume)
-        volumeVisualizer.style.setProperty(
-          "--volume",
-          averageVolume + "%"
-        );
-        if (averageVolume <= volume) {
-          IMAGE.src = idle;
-          IMAGE.style.setProperty('filter', 'brightness(' + brightness + '%)');
-        } else if (IMAGE.src!=talking) {
-          IMAGE.src = talking;
-          IMAGE.style.setProperty('filter', 'brightness(100%)');
-          IMAGE.style.transitionTimingFunction='ease-out';
-          IMAGE.style.top="0vh";
-          await new Promise(r => setTimeout(r, time*1000));
-          IMAGE.style.transitionTimingFunction='ease-in';
-          IMAGE.style.top=height+"vh";
-        }
-      };
-
-      new EventSource(document.URL+'audio').onmessage=volumeCallback;
-    } catch (e) {
-      window.alert(e.message);
-      throw e;
-    }
-  }
-</script>

package.json

@@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "test": "wrangler dev --ip=localhost"
+  },
+  "devDependencies": {
+    "wrangler": "^4.56.0"
+  },
+  "dependencies": {
+    "@sugoidogo/js-util": "^0.2.0",
+    "localforage": "^1.10.0",
+    "obs-websocket-js": "^5.0.7"
+  }
+}

pngtube.js

@@ -1,18 +0,0 @@
-async function getDevices() {
-    return JSON.parse(await (await fetch(document.URL + 'audio/')).text())
-}
-
-async function setAudioListener(listener, device = null) {
-    url = document.URL + 'audio'
-    if (device) {
-        url += '/' + encodeURIComponent(device)
-    }
-    eventsource = new EventSource(url);
-    eventsource.onmessage = function (event) {
-        listener(event.data)
-    }
-    eventsource.onerror = function () {
-        eventsource.close()
-    }
-    return eventsource
-}

pngtube.py

@@ -1,44 +0,0 @@
-import pip
-pip.main(['install','sounddevice','numpy'])
-
-from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
-from pathlib import Path
-import sounddevice, numpy, os, json, shutil, urllib
-
-class pngtube(SimpleHTTPRequestHandler):
-    protocol_version='HTTP/1.1'
-    def do_GET(self):
-        if not self.path.startswith('/audio'):
-            return SimpleHTTPRequestHandler.do_GET(self)
-        if self.path == '/audio/':
-            response=json.dumps(sounddevice.query_devices(kind='input'))
-            if response.startswith('{'):
-                response="["+response+"]"
-            response+="\n"
-            self.send_response(200)
-            self.send_header('Content-Type','text/json')
-            self.send_header('Content-Length',str(len(response)))
-            self.end_headers()
-            self.wfile.write(response.encode())
-            return
-        device=urllib.parse.unquote(self.path[len('/audio/'):]) or None
-        try:
-            sounddevice.check_input_settings(device=device)
-            self.send_response(200)
-            self.send_header('Content-Type','text/event-stream')
-            self.end_headers()
-        except Exception as e:
-            self.send_error(500,explain=str(e))
-        def audioLoop(indata, frames, time, status):
-            try:
-                volume=numpy.linalg.norm(indata)
-                message='data: '+str(volume)+'\n\n'
-                self.wfile.write(message.encode())
-                self.wfile.flush()
-            except:
-                pass
-        with sounddevice.InputStream(device=device,callback=audioLoop):
-            while True:
-                sounddevice.sleep(1)
-
-ThreadingHTTPServer(('localhost',5000), pngtube).serve_forever()

src/index.js

@@ -0,0 +1,339 @@
+import { FileReaderAsync, getFormDataDeep } from "@sugoidogo/js-util"
+import localforage from "localforage"
+import OBSWebSocket from "obs-websocket-js/json"
+
+/** @type {Storage} */
+const localStorage = localforage.createInstance({ name: 'pngtube.v7' })
+const obs = new OBSWebSocket()
+/** @type {HTMLDivElement} */
+const status_div = document.querySelector('div#status')
+/** @type {HTMLSelectElement} */
+const instance_select = document.querySelector('select#instance')
+/** @type {HTMLFormElement} */
+const new_instance_form = document.querySelector('form[name=new_instance]')
+/** @type {HTMLFormElement} */
+const instance_config_form = document.querySelector('form[name=instance_config')
+/** @type {HTMLInputElement} */
+const tts_checkbox = document.querySelector('input[name=tts]')
+/** @type {HTMLInputElement} */
+const source_input = document.querySelector('input#sources')
+/** @type {HTMLUListElement} */
+const source_list = document.querySelector('ul#source_list')
+/** @type {HTMLUListElement} */
+const asset_list = document.querySelector('ul#asset_list')
+/** @type {HTMLInputElement} */
+const asset_file_input = document.querySelector('input#asset_file_input')
+/** @type {HTMLSpanElement} */
+const obs_status_span = document.querySelector('span#obs_status')
+/** @type {HTMLInputElement} */
+const obs_token_input = document.querySelector('input[name=obs_token]')
+/** @type {HTMLDataListElement} */
+const obs_sources_datalist = document.querySelector('datalist#obs_sources')
+/** @type {HTMLSpanElement} */
+const templates = document.querySelector('span#templates')
+function set_loading(loading) {
+    if (loading) {
+        status_div.innerHTML = 'Loading...'
+        status_div.hidden = false
+        instance_select.hidden = true
+        new_instance_form.hidden = true
+        instance_config_form.hidden = true
+    } else {
+        instance_select.hidden = false
+        status_div.hidden = true
+    }
+}
+async function updateReferences() {
+    let refs = ['idle', 'active']
+    for (const asset_list_item of asset_list.children) {
+        const asset_url_input = asset_list_item.querySelector('input[name=url]')
+        const asset_dataurl = asset_url_input.value
+        if (asset_dataurl.startsWith('data:text')) {
+            const asset_text = await fetch(asset_dataurl, { cache: 'no-cache' }).then(response => response.text())
+            const asset_references = asset_text.matchAll(/#[\w-]+/g)
+            for (const asset_reference of asset_references) {
+                refs.push(asset_reference[0].substring(1))
+            }
+        }
+    }
+    refs = [...new Set(refs)]
+    /** @type {HTMLDataListElement} */
+    const element_references_datalist = document.querySelector('datalist#element_references')
+    while (element_references_datalist.childElementCount > 0) {
+        element_references_datalist.firstElementChild.remove()
+    }
+    for (const ref of refs) {
+        const option = document.createElement('option')
+        option.value = ref
+        element_references_datalist.appendChild(option)
+    }
+    for (const asset_list_item of asset_list.children) {
+        const asset_id_input = asset_list_item.querySelector('input[name=id]')
+        const asset_id = asset_id_input.value
+        if (refs.includes(asset_id)) {
+            refs.splice(refs.indexOf(asset_id), 1)
+        }
+    }
+    const asset_warning_div = document.querySelector('div#asset_warning')
+    if (refs.length != 0) {
+        const missing_assets_list = asset_warning_div.querySelector('ul#missing_assets')
+        while (missing_assets_list.childElementCount > 0) {
+            missing_assets_list.firstElementChild.remove()
+        }
+        for (const ref of refs) {
+            const listItem = document.createElement('li')
+            listItem.innerHTML = ref
+            missing_assets_list.appendChild(listItem)
+        }
+        asset_warning_div.hidden = false
+    } else {
+        asset_warning_div.hidden = true
+    }
+}
+/**
+ * @param {File|String} source
+ * @param {String} id
+*/
+async function add_asset(source, id = undefined) {
+    const asset_list_item = templates.querySelector('li.asset').cloneNode(true)
+    const asset_id = asset_list_item.querySelector('input[name=id]')
+    const asset_file_name = asset_list_item.querySelector('span#filename')
+    const asset_url = asset_list_item.querySelector('input[name=url]')
+    const asset_remove_button = asset_list_item.querySelector('button')
+    asset_remove_button.addEventListener('click', updateReferences)
+    if (!(source instanceof File)) {
+        let filename = null
+        if (!source.startsWith('data:')) {
+            filename = source.split('/').at(-1)
+        }
+        source = await fetch(source, { cache: 'no-cache' }).then(response => response.blob())
+        if (!filename) {
+            filename = id + '.' + source.type.split('/')[1]
+        }
+        source = new File([source], filename, { type: source.type })
+    }
+    asset_file_name.innerHTML = source.name
+    asset_url.value = await FileReaderAsync.readAs('DataURL', source)
+    if (id) {
+        asset_id.value = id
+    } else {
+        asset_id.value = source.name.split('.')[0]
+    }
+    asset_id.oninput = updateReferences
+    asset_list.appendChild(asset_list_item)
+    updateReferences()
+}
+/** @param {HTMLInputElement} source_input */
+async function adjust_sensitivity(source_input) {
+    obs.call('GetSourceFilterList', { sourceName: source_input.value })
+        .then((response) => {
+            for (const filter of response.filters) {
+                if (filter.filterKind = 'noise_gate_filter') {
+                    obs.call('OpenInputFiltersDialog', { inputName: source_input.value })
+                    return
+                }
+            }
+            obs.call('CreateSourceFilter', {
+                sourceName: source_input.value,
+                filterName: 'Noise Gate for PNGTube',
+                filterKind: 'noise_gate_filter',
+                filterSettings: {
+                    close_threshold: -60,
+                    open_threshold: -30
+                }
+            }).then((response) => {
+                obs.call('OpenInputFiltersDialog', { inputName: source_input.value })
+            })
+        }).catch(error => {
+            if (error.message = 'Not connected') {
+                alert('Not connected to OBS')
+            }
+        })
+}
+async function add_source(name = 'Mic/Aux') {
+    const source_list_item = templates.querySelector('li.source').cloneNode(true)
+    const source_input = source_list_item.querySelector('input[name=sources]')
+    const source_sensitivity_button = source_list_item.querySelector('button.sensitivity')
+    source_input.value = name
+    source_sensitivity_button.onclick = () => adjust_sensitivity(source_input)
+    source_list.appendChild(source_list_item)
+}
+document.querySelector('button#add_source').onclick = () => add_source()
+async function load_config(instance_name = instance_select.value) {
+    set_loading(true)
+    obs.disconnect()
+
+    for (const list of [asset_list, source_list]) {
+        while (list.childElementCount > 0) {
+            list.firstElementChild.remove()
+        }
+    }
+
+    if (instance_name == '') {
+        set_loading(false)
+        new_instance_form.hidden = false
+        return false
+    }
+
+    const loading_promises = []
+    const config = await localStorage.getItem(instance_name) || await fetch('default.json', { cache: 'no-cache' }).then(response => response.json())
+
+    console.debug(config)
+
+    if (config.obs_token) {
+        obs_token_input.value = config.obs_token
+        obs_init()
+    }
+    if (config.assets) {
+        if (!(config.assets instanceof Array)) {
+            config.assets = [config.assets]
+        }
+        for (const asset of config.assets) {
+            loading_promises.push(add_asset(asset.url, asset.id))
+        }
+    }
+    if (config.sources) {
+        if (typeof config.sources == 'string') {
+            config.sources = [config.sources]
+        }
+        for (const source of config.sources) {
+            loading_promises.push(add_source(source))
+        }
+    }
+    return Promise.allSettled(loading_promises).then(() => {
+        set_loading(false)
+        instance_config_form.hidden = false
+        return config
+    })
+}
+instance_select.onchange = () => load_config()
+async function instance_select_init() {
+    while (instance_select.childElementCount > 0) {
+        instance_select.firstElementChild.remove()
+    }
+    for (const instance_name of await localStorage.keys()) {
+        const option = document.createElement('option')
+        option.value = instance_name
+        option.innerHTML = instance_name
+        instance_select.appendChild(option)
+    }
+    const option = document.createElement('option')
+    option.innerHTML = 'Create New Instance'
+    option.value = ''
+    instance_select.appendChild(option)
+    instance_select.hidden = false
+}
+async function add_instance(name) {
+    const option = document.createElement('option')
+    option.value = name
+    option.innerHTML = name
+    instance_select.prepend(option)
+    instance_select.value = name
+    load_config()
+}
+new_instance_form.onsubmit = (event) => {
+    event.preventDefault()
+    add_instance(new_instance_form.instance_name.value)
+    new_instance_form.instance_name.value = ''
+}
+asset_file_input.onchange = (event) => {
+    for (const file of asset_file_input.files) {
+        add_asset(file)
+    }
+    asset_file_input.value = ''
+}
+obs.on('ConnectionClosed', (error) => {
+    obs_status_span.innerHTML = 'Not connected to OBS'
+    console.warn(error)
+})
+obs.on('Identified', () => {
+    obs_status_span.innerHTML = 'Connected to OBS'
+    obs.call('GetInputList')
+        .then((response) => {
+            for (const input of response.inputs) {
+                const option = document.createElement('option')
+                option.value = input.inputName
+                obs_sources_datalist.append(option)
+            }
+        })
+})
+obs.on('InputCreated', (event) => {
+    console.debug('source created: ' + event.inputName)
+    const option = document.createElement('option')
+    option.value = event.inputName
+    obs_sources_datalist.append(option)
+})
+obs.on('InputRemoved', (event) => {
+    console.debug('source removed: ' + event.inputName)
+    document.querySelector("option[value='" + event.inputName + "']").remove()
+})
+obs.on('InputNameChanged', (event) => {
+    console.debug('source renamed :' + event.oldInputName + " > " + event.inputName)
+    document.querySelector("option[value='" + event.oldInputName + "']").value = event.inputName
+})
+async function obs_init() {
+    let obsurl
+    let obspassword
+    const search_params = new URLSearchParams(location.search)
+    if (search_params.has('obsurl')) {
+        obsurl = search_params.get('obsurl')
+        obspassword = search_params.get('obspassword')
+        const url = new URL(obsurl)
+        url.password = obspassword
+        obs_token_input.value = url.href
+    } else {
+        if (obs_token_input.value) {
+            const url = new URL(obs_token_input.value)
+            obspassword = url.password
+            url.password = ''
+            obsurl = url.href
+        } else {
+            obs_status_span.innerHTML = 'No OBS Authorization found'
+        }
+    }
+    return obs.connect(obsurl, obspassword)
+}
+async function obs_auth() {
+    const url = new URL('https://obsconnect.sugoidogo.com')
+    url.searchParams.append('redirect_uri', location.href)
+    location.assign(url)
+}
+document.querySelector('button#obs_auth').onclick = obs_auth
+instance_config_form.onsubmit = (event) => {
+    event.preventDefault()
+    const config = getFormDataDeep(instance_config_form)
+    console.debug(config)
+    localStorage.setItem(instance_select.value, config)
+    const url = new URL(location.origin + location.pathname)
+    if (url.pathname.endsWith('/')) {
+        url.pathname += 'overlay.html'
+    } else {
+        const path = url.pathname.split('/')
+        path.pop()
+        path.push('overlay.html')
+        url.pathname = path.join('/')
+    }
+    fetch(url).then(response => response.text())
+        .then(async html => {
+            const script = document.createElement('script')
+            script.type = 'module'
+            script.innerHTML = 'const config=' + JSON.stringify(config)+'\n'
+            script.innerHTML+=await fetch(new URL('overlay.js',url)).then(response=>response.text())
+            html += script.outerHTML
+            const blob = new Blob([html])
+            const a = document.createElement('a')
+            a.href = URL.createObjectURL(blob)
+            a.download = 'pngtube-' + instance_select.value + '.html'
+            a.click()
+        })
+}
+async function remove_instance(name = instance_select.value) {
+    localStorage.removeItem(name)
+        .then(instance_select_init)
+        .then(load_config)
+}
+document.querySelector('button#remove_instance').onclick = () => remove_instance()
+
+
+instance_select_init()
+    .then(load_config)

src/overlay.js

@@ -0,0 +1,69 @@
+import { loadAsset } from '@sugoidogo/js-util'
+import OBSWebSocket from 'obs-websocket-js/json'
+
+console.debug(config)
+if (!(config.assets instanceof Array)) {
+    config.assets = [config.assets]
+}
+if (typeof config.sources == 'string') {
+    config.sources = [config.sources]
+}
+for (const source of config.assets) {
+    loadAsset(source.url, source.id, true)
+}
+// backoff mechanism
+let backoff = false
+function backoffStart(event) {
+    if (event instanceof AnimationEvent && getComputedStyle(event.target, event.pseudoElement).animationIterationCount == 'infinite') {
+        return
+    }
+    backoff = true
+}
+function backoffEnd() {
+    backoff = false
+}
+window.ontransitionstart = backoffStart
+window.ontransitionend = backoffEnd
+window.ontransitioncancel = backoffEnd
+window.onanimationstart = backoffStart
+window.onanimationend = backoffEnd
+window.ontransitioncancel = backoffEnd
+// animation function
+let active = false
+requestAnimationFrame(function animate() {
+    if (!backoff) {
+        for (const img of document.querySelectorAll('img')) {
+            if (active) {
+                img.classList.add('active')
+            } else {
+                img.classList.remove('active')
+            }
+        }
+    }
+    requestAnimationFrame(animate)
+})
+// obs connection
+const obs = new OBSWebSocket()
+obs.on('ConnectionClosed', (error) => {
+    window.alert('PNGTube error ' + error.code + ': ' + error.message)
+})
+obs.on('Identified', (event) => {
+    console.debug(event)
+})
+obs.on('InputVolumeMeters', (event) => {
+    const inputs = event.inputs.filter(input => config.sources.includes(input.inputName))
+    for (const input of inputs) {
+        for (const channel of input.inputLevelsMul) {
+            if (channel[0] > 0) {
+                active = true
+                return
+            }
+        }
+    }
+    active = false
+})
+const token = new URL(config.obs_token)
+const password = token.password
+token.password = ''
+const url = token.href
+obs.connect(url, password, { eventSubscriptions: (1 << 16) })

wrangler.jsonc

@@ -0,0 +1,12 @@
+{
+    "$schema": "./node_modules/wrangler/config-schema.json",
+    "name": "pngtube",
+    "assets": {"directory": "assets"},
+    "workers_dev": false,
+    "keep_vars": true,
+    "compatibility_date": "2025-12-20",
+    "build": {
+        "watch_dir": "./src",
+        "command": "esbuild --outdir=assets --format=esm --bundle --minify --sourcemap --sources-content src/*"
+    }
+}