obsidian-plugin/travisvn_obsidian-vision-recall
1
0
Fork 0
mirror of https://github.com/travisvn/obsidian-vision-recall.git synced 2026-07-22 05:38:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

MVP release

Browse source
This commit is contained in:
Travis V 2025-02-06 15:51:56 -05:00
commit 0cb37e8abd
70 changed files with 14875 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
.editorconfig Normal file
View file

@ -0,0 +1,11 @@
# top-most EditorConfig file
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
tab_width = 2
trim_trailing_whitespace = true

3
.eslintignore Normal file
View file

@ -0,0 +1,3 @@
node_modules/
main.js

40
.eslintrc Normal file
View file

@ -0,0 +1,40 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
"env": { "node": true },
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended"
],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": ["error", { "args": "none" }],
"@typescript-eslint/ban-ts-comment": "off",
"no-prototype-builtins": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"react/prop-types": "off",
"react-hooks/exhaustive-deps": "error"
},
"overrides": [
{
"files": ["*.json", "*.jsonc", ".eslintrc"],
"parser": "jsonc-eslint-parser",
"rules": {
"jsonc/auto": "error"
}
}
],
"settings": {
"react": {
"version": "detect"
}
}
}

25
.gitignore vendored Normal file
View file

@ -0,0 +1,25 @@
# vscode
.vscode
# Intellij
*.iml
.idea
# npm
node_modules
# Don't include the compiled main.js file in the repo.
# They should be uploaded to GitHub releases instead.
main.js
# Exclude sourcemaps
*.map
# obsidian
data.json
# Exclude macOS Finder (System Explorer) View States
.DS_Store
.gptree_config
gptree_output.txt

1
.npmrc Normal file
View file

@ -0,0 +1 @@
tag-version-prefix=""

661
LICENSE Normal file
View file

@ -0,0 +1,661 @@
GNU AFFERO GENERAL PUBLIC LICENSE
Version 3, 19 November 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 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 <https://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
<https://www.gnu.org/licenses/>.

104
README.md Normal file
View file

@ -0,0 +1,104 @@
# ✨ Vision Recall: Your AI-Powered Screenshot Knowledge Base for Obsidian 🧠🖼️
[![GitHub Stars](https://img.shields.io/github/stars/travisvn/obsidian-vision-recall?style=social)](https://github.com/travisvn/obsidian-vision-recall)
[![GitHub Issues](https://img.shields.io/github/issues/travisvn/obsidian-vision-recall)](https://github.com/travisvn/obsidian-vision-recall/issues)
[![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0)
**Turn Screenshots into Knowledge Gold with Vision Recall!** 🚀 Capture, process, and instantly recall information from your screenshots directly within Obsidian, powered by AI vision and language models.
## ⚡️ Quick Elevator Pitch
Vision Recall is an Obsidian plugin that automatically processes screenshots you take or import, using AI to extract text (OCR), analyze image content (Vision LLM), and generate insightful notes, all seamlessly integrated into your Obsidian vault. **Stop losing valuable information trapped in images – make your screenshots searchable, linkable, and knowledge-rich!**
## ✨ Key Features that Supercharge Your Screenshot Workflow
- **📸 Automatic Screenshot Intake:**
- 📥 **Intake Folder Monitoring:** Automatically process screenshots as soon as they are added to your designated intake folder. 📂
- ⏱️ **Periodic & Auto-Processing:** Options for periodic intake folder checks or instant processing upon file creation.
- 🔗 **Deep Link Intake:** Capture screenshots directly via Obsidian deep links (for advanced workflows). 🔗
- 📋 **Clipboard Upload:** Quickly process screenshots directly from your clipboard. 📋
- 📤 **File Upload Modal:** Easily upload and process screenshots from files in your vault. 📤
- **🧠 AI-Powered Screenshot Analysis:**
- 👓 **Optical Character Recognition (OCR):** Extract text from images with Tesseract OCR. 👓
- 👁️ **Vision LLM Integration:** Leverage powerful Vision Language Models (like OpenAI's GPT-4o or Ollama models) to analyze image content and understand the context. 👁️
- 📝 **Intelligent Note Generation:** Automatically generate insightful Obsidian notes summarizing the key information from your screenshots, combining OCR text and vision analysis. 📝
- 🏷️ **Smart Tagging:** AI-suggested tags automatically categorize your screenshots, making them easily searchable and linkable. 🏷️
- **🗂️ Organize & Recall Your Visual Knowledge:**
- 🖼️ **Gallery & List Views:** Browse and manage your screenshots in visually appealing gallery or detailed list views within Obsidian. 🖼️ 📃
- 🔍 **Powerful Filtering & Search:** Quickly find screenshots using text search, tag filters, and date range filters. 🔍
- 🏷️ **Tag Management:** Easily edit and manage tags for your screenshots to refine your knowledge organization. 🏷️
- 🔗 **Obsidian Note Linking:** Seamlessly link back to your original screenshots from generated notes and vice versa. 🔗
- 📊 **Metadata Rich:** View and edit detailed metadata for each screenshot, including OCR text, vision analysis, generated notes, and extracted tags. 📊
- **⚙️ Customizable & User-Friendly:**
- 🎛️ **Comprehensive Settings:** Fine-tune LLM providers, storage folders, output note settings, and more through a detailed settings tab. 🎛️
- 🚦 **Processing Queue Management:** Monitor and control screenshot processing with a built-in queue, allowing you to pause, resume, and stop processing as needed. 🚦
- 📊 **Status Bar Integration:** Quickly access processing queue status and controls from the Obsidian status bar. 📊
- 🧑‍💻 **Debug Mode:** Detailed logging for troubleshooting and development. 🧑‍💻
## 🚀 Getting Started with Vision Recall
### 1. Prerequisites
- **Obsidian:** You need to have [Obsidian](https://obsidian.md) installed.
- **LLM API Key (Optional, but Recommended for AI Features):**
- **OpenAI API Key:** (For OpenAI models like GPT-4o). Get your API key from [OpenAI](https://platform.openai.com/account/api-keys).
- **Ollama (Optional, for local LLMs):** [Ollama](https://ollama.com/) allows you to run models locally. Install Ollama if you want to use local models.
- **OpenRouter Account (Recommended for flexibility and cost management):** [OpenRouter](https://openrouter.ai/) allows you to access various LLM models through a single API key and manage costs effectively.
### 2. Installation (Within Obsidian)
1. **Open Obsidian Settings:** Go to `Settings` → `Community plugins`.
2. **Disable Safe Mode:** If Safe mode is enabled, disable it.
3. **Browse Community Plugins:** Click `Browse` to open the community plugins browser.
4. **Search for "Vision Recall":** Search for "Vision Recall" in the search bar.
5. **Install Vision Recall:** Click `Install` on the "Vision Recall" plugin.
6. **Enable Plugin:** Go to `Settings` → `Community plugins` and enable the "Vision Recall" plugin.
### 3. Initial Setup & Configuration
1. **Open Vision Recall Settings:** After enabling the plugin, a "Vision Recall" settings tab will appear in your Obsidian settings.
2. **Configure LLM Provider:** Choose your preferred LLM provider (OpenAI or Ollama) and enter your API key (if using OpenAI or OpenRouter). Configure the API Base URL if needed (e.g., for Ollama or custom OpenAI-compatible endpoints).
3. **Set up Storage Folders:** Configure your screenshot storage, intake, and output notes folders within your Obsidian vault in the settings tab. Vision Recall can automatically create these folders for you if they don't exist.
4. **Start Processing Screenshots!** You can now:
- **Drop screenshots into your intake folder** for automatic processing.
- **Use the "Add New Screenshot" command** to upload files or paste from clipboard.
- **Open the Vision Recall View** (using the ribbon icon or command) to manage and browse your screenshots.
### 4. Basic Usage
- **Processing Screenshots:** Vision Recall will automatically process screenshots in your intake folder or those you upload via the plugin's UI.
- **Viewing Screenshots:** Open the "Vision Recall View" to browse your processed screenshots in gallery or list mode.
- **Opening Notes:** Click on a screenshot in the Vision Recall View to open its generated Obsidian note, containing summaries, OCR text, vision analysis, and tags.
- **Editing Metadata:** Edit tags and other metadata directly from the Vision Recall View.
- **Managing Processing Queue:** Use the Processing Queue modal (accessible from the status bar button or commands) to monitor and control screenshot processing.
---
## 🗺️ Roadmap & Future Enhancements
- **[ ] More LLM Provider Integrations:** Expanding support to more LLM providers and models.
- **[ ] Advanced Note Customization:** More options for customizing the format and content of generated notes.
- **[ ] Enhanced Tagging Features:** Improved tag suggestion algorithms and tag management capabilities.
- **[ ] Community Feature Requests:** Prioritizing features based on user feedback and community requests.
**Contributions and feature requests are welcome!** 🙏
---
## 🤝 Contributing
Vision Recall is open-source! If you're a developer and want to contribute, feel free to:
- **Report Issues:** [Submit bug reports and feature requests](https://github.com/travisvn/obsidian-vision-recall/issues).
- **Suggest Features:** Open issues to discuss new features and improvements.
- **Submit Pull Requests:** Fork the repository, make your changes, and submit pull requests.
---
**Enjoy recalling your visual knowledge!** ✨

79
docs/ollama-setup.md Normal file
View file

@ -0,0 +1,79 @@
# Setting up Ollama for Obsidian Vision Recall Plugin
This guide will walk you through setting up Ollama on your computer and configuring it to work with the Vision Recall plugin.
## Installing Ollama
1. Visit the [Ollama website](https://ollama.com) and download the installer for your operating system:
- macOS (Apple Silicon or Intel)
- Linux
- Windows
2. Follow the installation instructions for your system:
- **macOS**: Open the downloaded file and drag Ollama to your Applications folder
- **Linux**: Run the install script
- **Windows**: Run the installer
## Starting Ollama
1. **macOS & Linux**:
- Open Terminal
- Run `ollama serve`
2. **Windows**:
- Ollama should start automatically as a service
- You can verify it's running by opening Command Prompt and typing `ollama serve`
## Pulling a Vision Model
1. Find the model you want to run (and that your system can handle) from the [Ollama search](https://ollama.com/search?c=vision)
2. Open a new terminal window (while keeping Ollama running in the first one)
3. Run the following command, for example:
```bash
ollama pull llama3.2-vision:11b
```
This will download the Llama 3.2 Vision model, which is capable of processing both text and images.
> Note: The initial download may take several minutes depending on your internet connection.
## Configuring the Vision Recall Plugin
1. Open Obsidian and go to Settings
2. Click on "Vision Recall" in the left sidebar
3. Under "LLM settings":
- Set "LLM provider" to "Ollama"
- Set "API base URL" to: `http://localhost:11434`
- Set "Vision model name" to the name of the model you pulled (e.g., `llama3.2-vision:11b`)
- Set "Endpoint LLM model name" to the same model name (e.g., `llama3.2-vision:11b`) or another one. Note that it may be beneficial to use the same model as the vision model due to system resource allocation.
## Verifying the Setup
To verify everything is working:
1. Click the icon in the ribbon menu to open Vision Recall
2. Click the `Test Config` button
3. In the modal, click the `Test Connection — Retrieve Models`
4. If models load in the modal below, you're good to go!
## Troubleshooting
If you encounter issues:
1. Ensure Ollama is running by opening a terminal and running:
```bash
ollama ps
```
2. Check that the base URL is correct in your plugin settings
3. Verify your model was downloaded successfully:
```bash
ollama list
```
4. If you get connection errors, ensure no firewall is blocking port 11434
For additional help, visit the [Ollama documentation](https://github.com/ollama/ollama) or the plugin's GitHub issues page.

71
docs/reference.md Normal file
View file

@ -0,0 +1,71 @@
# API Key Setup for Screenshot AI (Obsidian Plugin)
This guide will help you obtain API keys from supported providers and configure them for use with the Screenshot AI Obsidian plugin.
## 1. Choosing Your AI Models
To process screenshots effectively, the plugin requires:
- **A vision model**: Used to extract and analyze image content.
- **A regular LLM model**: Used for text-based queries and reasoning. This model may also support vision (i.e., multimodal models like GPT-4 Turbo with Vision).
You can use the same model for both tasks or specify separate models.
## 2. Obtaining an API Key
### OpenAI
1. Visit [OpenAI's API page](https://platform.openai.com/signup/).
2. Sign in or create an account.
3. Go to [API Keys](https://platform.openai.com/api-keys) and generate a new key.
4. Copy your API key and store it securely.
### OpenRouter (Alternative API Gateway)
[OpenRouter](https://openrouter.ai/) provides a unified API to access multiple models from different providers.
1. Go to [OpenRouter's API page](https://openrouter.ai/).
2. Sign in or create an account.
3. Navigate to the API keys section and generate a key.
4. Copy the API key and store it securely.
## 3. Configuring the Plugin
Once you have obtained an API key, you need to configure it within the plugin settings.
### Setting Up API Keys
In Obsidian:
1. Open **Settings**.
2. Navigate to **Screenshot AI**.
3. Locate the **API Key** field and enter your key.
### Specifying Models
You need to define:
- **Vision Model**: A model capable of processing images (e.g., `gpt-4-turbo`, `gpt-4-vision-preview`, `openrouter/llava`).
- **LLM Model**: A text model for answering queries (e.g., `gpt-4-turbo`, `mistral`, `claude-3`).
Example Configuration:
```json
{
"api_key": "your-api-key-here",
"vision_model": "gpt-4-vision-preview",
"llm_model": "gpt-4-turbo"
}
```
## 4. Notes on API Usage & Limits
- OpenAI and OpenRouter have different pricing structures. Check their respective pricing pages.
- OpenRouter allows routing requests to different providers.
- Ensure your API key has sufficient quota to avoid service interruptions.
For troubleshooting, refer to the **Obsidian Console** (`Ctrl+Shift+I` on Windows/Linux, `Cmd+Option+I` on macOS) to check for API-related errors.
---
For further assistance, visit our [GitHub Issues](https://github.com/your-repo/issues) page or the plugin documentation.

52
esbuild.config.mjs Normal file
View file

@ -0,0 +1,52 @@
import esbuild from "esbuild";
import process from "process";
import builtins from "builtin-modules";
const banner =
`/*
THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
if you want to view the source, please visit the github repository of this plugin
*/
`;
const prod = (process.argv[2] === "production");
const context = await esbuild.context({
banner: {
js: banner,
},
entryPoints: ["src/main.ts"],
bundle: true,
external: [
"obsidian",
"electron",
"@codemirror/autocomplete",
"@codemirror/collab",
"@codemirror/commands",
"@codemirror/language",
"@codemirror/lint",
"@codemirror/search",
"@codemirror/state",
"@codemirror/view",
"@lezer/common",
"@lezer/highlight",
"@lezer/lr",
...builtins],
format: "cjs",
target: "es2020",
logLevel: "info",
sourcemap: prod ? false : "inline",
treeShaking: true,
outfile: "main.js",
minify: prod,
define: {
global: "window",
},
});
if (prod) {
await context.rebuild();
process.exit(0);
} else {
await context.watch();
}

10
manifest.json Normal file
View file

@ -0,0 +1,10 @@
{
"id": "vision-recall",
"name": "Vision Recall",
"version": "1.0.0",
"minAppVersion": "0.15.0",
"description": "Transform screenshots into searchable Obsidian notes using AI vision and text analysis.",
"author": "Travis Van Nimwegen",
"authorUrl": "https://travis.engineer",
"isDesktopOnly": true
}

5421
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

57
package.json Normal file
View file

@ -0,0 +1,57 @@
{
"name": "obsidian-vision-recall",
"version": "1.0.0",
"description": "Transform screenshots into searchable Obsidian notes using AI vision and text analysis.",
"main": "main.js",
"scripts": {
"dev": "vite build --mode development --watch",
"build": "tsc -noEmit -skipLibCheck && vite build --mode production",
"version": "node version-bump.mjs && git add manifest.json versions.json"
},
"keywords": [],
"author": "Travis Van Nimwegen",
"license": "AGPL-3.0",
"devDependencies": {
"@tailwindcss/container-queries": "^0.1.1",
"@types/events": "^3.0.3",
"@types/luxon": "^3.4.2",
"@types/node": "^20.17.16",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@types/tesseract.js": "^0.0.2",
"@typescript-eslint/eslint-plugin": "5.29.0",
"@typescript-eslint/parser": "5.29.0",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"builtin-modules": "3.3.0",
"esbuild": "0.17.3",
"obsidian": "latest",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"tslib": "2.4.0",
"typescript": "^5.7.3",
"vite": "^6.0.11",
"zod-to-json-schema": "^3.24.1"
},
"dependencies": {
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"franc": "^6.2.0",
"lowdb": "^7.0.1",
"lucide-react": "^0.474.0",
"luxon": "^3.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"tailwind-merge": "^2.6.0",
"tesseract.js": "^6.0.0",
"zod": "^3.24.1",
"zustand": "^5.0.3"
},
"prettier": {
"arrowParens": "always",
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"semi": false
}
}

6
postcss.config.js Normal file
View file

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

40
src/components/InitializeFolders.tsx Normal file
View file

@ -0,0 +1,40 @@
// This is a component that initializes the folders for the plugin.
import { STORAGE_KEYS } from '@/constants';
import { usePlugin } from '@/context';
import { initializeFolders } from '@/services/shared-functions';
import { FolderPlusIcon } from 'lucide-react';
import React from 'react';
interface InitializeFoldersProps {
foldersInitialized: boolean;
setFoldersInitialized: (value: boolean) => void;
}
export const InitializeFolders = ({ foldersInitialized, setFoldersInitialized }: InitializeFoldersProps) => {
const plugin = usePlugin();
const runInitializeFolders = async () => {
const success = await initializeFolders(plugin);
if (success) {
setFoldersInitialized(true);
localStorage.setItem(STORAGE_KEYS.INITIALIZE_FOLDERS, 'true');
}
}
if (foldersInitialized) {
return null;
}
return (
<>
<button
className='inline-flex items-center gap-2'
onClick={runInitializeFolders}
>
<FolderPlusIcon className='w-4 h-4' /> Initialize Folders
</button>
</>
);
};

244
src/components/MainViewHeader.tsx Normal file
View file

@ -0,0 +1,244 @@
import { useObsidianApp, usePlugin } from '@/context';
import { FileUploadModal } from '@/components/modals/FileUploadModal';
import { FolderSync, Info, LoaderPinwheel, Plus, RefreshCcw, Settings2, LayoutGrid, List, Bug, Maximize2, Hash } from 'lucide-react';
import { Notice, TFile } from 'obsidian';
import React, { useEffect, useState } from 'react';
import { DocViewerModal } from '@/components/modals/DocViewerModal';
import { ConfigModal } from '@/components/modals/ConfigModal';
import { cn } from '@/lib/utils';
import { useDataContext } from '@/data/DataContext';
import { TestConfigModal } from './modals/TestConfigModal';
import { ProcessingQueueModal } from './modals/ProcessingQueueModal';
import { computeFileHash } from '@/lib/image-utils';
import { useQueueStore } from '@/stores/queueStore';
import { DebugOperationsModal } from './modals/DebugOperationsModal';
import { IS_DEV } from '@/constants';
interface MainViewHeaderProps {
metadata: any[];
refreshMetadata: () => Promise<void>;
viewMode?: 'list' | 'gallery';
onViewModeChange?: (mode: 'list' | 'gallery') => void;
}
export const MainViewHeader = ({ metadata, refreshMetadata, viewMode = 'list', onViewModeChange }: MainViewHeaderProps) => {
const plugin = usePlugin();
const app = useObsidianApp();
const dataManager = useDataContext();
const { status, actions } = useQueueStore();
const [showProcessing, setShowProcessing] = useState(false);
const [showMaximize, setShowMaximize] = useState(false);
useEffect(() => {
if (status.isProcessing && status.minimized) {
setShowProcessing(true);
} else {
setShowProcessing(false);
}
}, [status.isProcessing, status.minimized]);
useEffect(() => {
if (!status.maximized) {
setShowMaximize(true);
} else {
setShowMaximize(false);
}
}, [status.maximized]);
return (
<>
<div className='@container/header flex flex-row justify-between items-center'>
<h2 className='m-0'>Vision Recall</h2>
{onViewModeChange && (
<div className="flex items-center gap-2">
<button
className={cn(
'p-2 rounded hover:bg-background-modifier-hover cursor-pointer',
viewMode === 'list' ? 'bg-background-modifier-hover' : '',
)}
onClick={() => onViewModeChange('list')}
aria-label="List view"
>
<List className="w-5 h-5" />
</button>
<button
className={cn(
'p-2 rounded hover:bg-background-modifier-hover cursor-pointer',
viewMode === 'gallery' ? 'bg-background-modifier-hover' : '',
)}
onClick={() => onViewModeChange('gallery')}
aria-label="Gallery view"
>
<LayoutGrid className="w-5 h-5" />
</button>
</div>
)}
<div className='flex flex-row items-center gap-2 flex-wrap justify-end'>
<button
className='cursor-pointer flex flex-row items-center gap-2'
aria-label='Add a new screenshot'
onClick={() => {
new FileUploadModal({
app,
plugin,
refreshMetadata,
updateStatus: actions.updateStatus
}).open();
}}
>
<Plus className='w-4 h-4' />
<div className='hidden @3xl/header:block'>
Add New Screenshot
</div>
</button>
<button
className='cursor-pointer flex flex-row items-center gap-2'
aria-label='Process the intake folder'
onClick={async () => {
await plugin.screenshotProcessor.processIntakeFolder();
await refreshMetadata();
}}
>
<FolderSync className='w-4 h-4' />
<div className='hidden @3xl/header:block'>
Process Intake
</div>
</button>
<button
className='cursor-pointer flex flex-row items-center gap-2'
aria-label='Refresh the screenshots'
onClick={async () => {
await refreshMetadata();
new Notice('Refreshed screenshots');
}}
>
<RefreshCcw className='w-4 h-4' />
<div className='hidden @3xl/header:block'>
Refresh
</div>
</button>
</div>
</div>
<div className='@container/subheader flex flex-row justify-between items-center my-4'>
<div className='flex flex-row gap-2'>
<button
aria-label='Information'
className='cursor-pointer flex flex-row items-center gap-2'
onClick={() => {
new DocViewerModal(
app,
plugin,
'reference'
).open();
}}
>
<Info className='w-4 h-4' />
<div className='hidden @3xl/subheader:block'>
Information
</div>
</button>
<button
aria-label='Test Config'
className='cursor-pointer flex flex-row items-center gap-2'
onClick={() => {
new TestConfigModal(
app,
plugin,
dataManager
).open();
}}
>
<Bug className='w-4 h-4' />
<div className='hidden @3xl/subheader:block'>
Test Config
</div>
</button>
</div>
<div className='flex flex-row gap-2'>
{showProcessing ? (
<button
aria-label='View processing queue'
className='cursor-pointer flex flex-row items-center gap-2'
onClick={() => {
new ProcessingQueueModal({
app: app,
plugin: plugin
}).open();
}}
>
<LoaderPinwheel className='w-4 h-4 animate-spin-slower' />
<div className='hidden @3xl/subheader:block'>
Processing...
</div>
</button>
) : (
<button
aria-label='View processing queue'
className='cursor-pointer flex flex-row items-center gap-2'
onClick={() => {
new ProcessingQueueModal({
app: app,
plugin: plugin
}).open();
}}
>
<LoaderPinwheel className='w-4 h-4' />
<div className='hidden @4xl/subheader:block'>
Processing Queue
</div>
</button>
)}
{showMaximize && (
<button
aria-label='Maximize progress display'
className='cursor-pointer flex flex-row items-center gap-2'
onClick={() => actions.toggleMaximized()}
>
<Maximize2 className='w-4 h-4' />
<div className='hidden @4xl/subheader:block'>
Maximize
</div>
</button>
)}
{/* Debug Modal */}
{IS_DEV && (
<button
aria-label='Debug Modal'
className='cursor-pointer flex flex-row items-center gap-2'
onClick={() => {
new DebugOperationsModal(app, plugin).open();
}}
>
<Hash className='w-4 h-4' />
<div className='hidden @4xl/subheader:block'>
Debug Modal
</div>
</button>
)}
</div>
<button
aria-label='Config'
className='cursor-pointer flex flex-row items-center gap-2'
onClick={() => {
new ConfigModal(app, plugin, plugin.dataManager).open();
}}
>
<Settings2 className='w-4 h-4' />
<div className='hidden @3xl/subheader:block'>
Settings
</div>
</button>
</div>
</>
);
};
// export default MainViewHeader;

57
src/components/ProcessingDisplay.tsx Normal file
View file

@ -0,0 +1,57 @@
// Shows the state of the processing and the progress of the processing
import React, { useEffect, useState } from 'react';
import { EyeOff, X } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useQueueStore } from '@/stores/queueStore';
export const ProcessingDisplay = () => {
const { status, actions } = useQueueStore();
const [clickedOutside, setClickedOutside] = useState(false);
useEffect(() => {
if (status.isProcessing) {
setClickedOutside(false);
}
}, [status.isProcessing]);
if (!status.maximized) {
if (!status.isProcessing || status.minimized) return null;
} else {
if (!status.isProcessing) return null;
}
return (
<>
<div
className={cn(
'fixed top-0 left-0 w-full h-full bg-[#000000] bg-opacity-30 flex flex-col items-center justify-center backdrop-blur-sm z-[5]',
'',
(clickedOutside) ? 'hidden' : '',
)}
onClick={() => setClickedOutside(true)}
></div>
<div className='fixed top-0 left-0 w-full h-full flex flex-col items-center justify-center z-[6] pointer-events-none'>
<div className='relative bg-background-primary p-4 rounded-m shadow-lg flex flex-col items-center gap-2 pointer-events-auto w-80'>
<div className='absolute top-2 right-2 flex flex-col items-center justify-center gap-1'>
<button
aria-label='Toggle minimize'
onClick={() => actions.toggleMinimized()}
className='w-fit h-fit flex items-center justify-center cursor-pointer'
>
<X className='w-4 h-4' />
</button>
</div>
<div className="lds-ellipsis text-accent opacity-50"><div></div><div></div><div></div><div></div></div>
<div className='text-text-normal'>{status.message}</div>
<div className='w-full h-2 bg-background-secondary rounded-full'>
<div
className='bg-background-secondary-alt h-full rounded-full transition-all duration-300'
style={{ width: `${status.progress || 50}%` }}
></div>
</div>
</div>
</div>
</>
);
};

150
src/components/modals/ConfigModal.tsx Normal file
View file

@ -0,0 +1,150 @@
import React, { useEffect, useState } from 'react';
import { Modal } from 'obsidian';
import { DataManager } from '@/data/DataManager';
import { Plugin } from 'obsidian';
import { Config, DefaultConfig } from '@/types/config-types';
import { createRoot } from 'react-dom/client';
const ConfigModalContent = ({
dataManager,
onClose,
}: {
dataManager: DataManager;
onClose: () => void;
}) => {
const [initialized, setInitialized] = useState(false);
const [config, setConfig] = useState<Config>({});
const [dirty, setDirty] = useState(false);
useEffect(() => {
if (initialized) return;
const loadConfig = async () => {
const currentConfig = await dataManager.getConfig();
setConfig(currentConfig);
setInitialized(true);
};
loadConfig();
}, []);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
await dataManager.updateConfig(config);
onClose();
};
const updateConfig = (updates: Partial<Config>) => {
setConfig(prev => ({ ...prev, ...updates }));
setDirty(true);
};
if (!initialized) {
return <div>Loading...</div>;
}
return (
<div className="config-modal-container">
<form onSubmit={handleSubmit} className="config-modal-form">
<div className="config-field">
<label className="config-field-checkbox-label">
<input
type="checkbox"
defaultChecked={config.enableAutoIntakeFolderProcessing || DefaultConfig.enableAutoIntakeFolderProcessing}
onChange={e => updateConfig({ enableAutoIntakeFolderProcessing: e.target.checked })}
/>
Enable Auto Intake Folder Processing
</label>
</div>
<div className="config-field">
<label className="config-field-checkbox-label">
<input
type="checkbox"
defaultChecked={config.enablePeriodicIntakeFolderProcessing || DefaultConfig.enablePeriodicIntakeFolderProcessing}
onChange={e => updateConfig({ enablePeriodicIntakeFolderProcessing: e.target.checked })}
/>
Enable Periodic Intake Folder Processing
</label>
</div>
<div className="config-field">
<label>
Intake Folder Polling (seconds)
</label>
<input
type="number"
min="30"
max="86400"
defaultValue={config.intakeFolderPollingInterval || DefaultConfig.intakeFolderPollingInterval}
onChange={e => updateConfig({ intakeFolderPollingInterval: Number(e.target.value) })}
/>
</div>
<div className="config-field">
<label className="config-field-checkbox-label">
<input
type="checkbox"
defaultChecked={config.enableAdvancedLogging || DefaultConfig.enableAdvancedLogging}
onChange={e => updateConfig({ enableAdvancedLogging: e.target.checked })}
/>
Enable Advanced Logging
</label>
</div>
<div className="config-field">
<label className="config-field-checkbox-label">
<input
type="checkbox"
defaultChecked={config.defaultMinimizedProgressDisplay || DefaultConfig.defaultMinimizedProgressDisplay}
onChange={e => updateConfig({ defaultMinimizedProgressDisplay: e.target.checked })}
/>
Default Minimized Progress Display
</label>
</div>
<div className="config-modal-controls">
<button type="submit" className="mod-cta cursor-pointer" disabled={!dirty}>
Save Changes
</button>
<button type="button" className="mod-warning cursor-pointer" onClick={onClose}>
Cancel
</button>
</div>
</form>
</div>
);
};
export class ConfigModal extends Modal {
dataManager: DataManager;
root: any;
constructor(
app: any,
plugin: Plugin,
dataManager: DataManager,
) {
super(app);
this.dataManager = dataManager;
}
async onOpen() {
const { contentEl, titleEl } = this;
titleEl.setText('Advanced Configuration');
this.root = createRoot(contentEl);
this.root.render(
<ConfigModalContent
dataManager={this.dataManager}
onClose={() => this.close()}
/>
);
}
onClose() {
const { contentEl } = this;
contentEl.empty();
}
}

62
src/components/modals/DebugOperationsModal.tsx Normal file
View file

@ -0,0 +1,62 @@
import React, { useEffect, useState } from 'react';
import { Modal } from 'obsidian';
import { DataManager } from '@/data/DataManager';
import { Plugin } from 'obsidian';
import { Config, DefaultConfig } from '@/types/config-types';
import { createRoot } from 'react-dom/client';
import VisionRecallPlugin from '@/main';
const DebugOperationsView = ({
plugin,
onClose,
}: {
plugin: VisionRecallPlugin;
onClose: () => void;
}) => {
return (
<div className="config-modal-container">
<div className='flex flex-row gap-2 justify-center items-center flex-wrap'>
<button
className='cursor-pointer'
onClick={() => {
}}
>
Generate Image Hashes
</button>
</div>
</div>
);
};
export class DebugOperationsModal extends Modal {
plugin: VisionRecallPlugin;
root: any;
constructor(
app: any,
plugin: VisionRecallPlugin,
) {
super(app);
this.plugin = plugin;
}
async onOpen() {
const { contentEl, titleEl } = this;
titleEl.setText('Debug Operations');
this.root = createRoot(contentEl);
this.root.render(
<DebugOperationsView
plugin={this.plugin}
onClose={() => this.close()}
/>
);
}
onClose() {
const { contentEl } = this;
contentEl.empty();
}
}

112
src/components/modals/DocViewerModal.tsx Normal file
View file

@ -0,0 +1,112 @@
import { App, MarkdownRenderer, Modal } from 'obsidian';
import React, { useEffect, useRef, useState } from 'react';
import { createRoot } from 'react-dom/client';
import VisionRecallPlugin from '@/main';
interface DocViewerFormProps {
docPath: string;
onClose: () => void;
app: App;
plugin: VisionRecallPlugin;
}
const DOC_PATHS = {
OLLAMA_SETUP: 'ollama-setup.md',
REFERENCE_GUIDE: 'reference.md',
}
const DocViewerForm: React.FC<DocViewerFormProps> = ({ docPath, onClose, app, plugin }) => {
const containerRef = useRef<HTMLDivElement>(null);
const [content, setContent] = useState<string>('');
const [error, setError] = useState<string>('');
useEffect(() => {
const loadDocument = async () => {
try {
const fileContent = await app.vault.adapter.read(docPath);
setContent(fileContent);
} catch (err) {
console.error('Error loading document:', err);
setError('Failed to load document');
}
};
loadDocument();
}, [docPath, app.vault]);
useEffect(() => {
if (!containerRef.current || !content) return;
const el = containerRef.current;
MarkdownRenderer.render(app, content, el, '', plugin);
return () => {
el.empty();
};
}, [content, app, plugin]);
return (
<div className="doc-viewer-modal">
<div className='flex flex-row gap-2 justify-center items-center'>
<button
type='button'
className='cursor-pointer'
onClick={async () => {
const newDocPath = `${plugin.manifest.dir}/docs/${DOC_PATHS.OLLAMA_SETUP}`;
const fileContent = await app.vault.adapter.read(newDocPath);
setContent(fileContent);
}}
>
Ollama Setup
</button>
<button
type='button'
className='cursor-pointer'
onClick={async () => {
const newDocPath = `${plugin.manifest.dir}/docs/${DOC_PATHS.REFERENCE_GUIDE}`;
const fileContent = await app.vault.adapter.read(newDocPath);
setContent(fileContent);
}}
>
Reference Guide
</button>
</div>
{error && <div className="error-message">{error}</div>}
<div ref={containerRef} className="markdown-content" />
<div className="button-group">
<button type="button" onClick={onClose}>Close</button>
</div>
</div>
);
};
export class DocViewerModal extends Modal {
private docPath: string;
private plugin: VisionRecallPlugin;
constructor(app: App, plugin: VisionRecallPlugin, docName: string) {
super(app);
this.plugin = plugin;
this.docPath = `${plugin.manifest.dir}/docs/${docName}.md`;
}
onOpen() {
const { contentEl, titleEl } = this;
titleEl.setText('Documentation');
const root = createRoot(contentEl);
root.render(
<DocViewerForm
docPath={this.docPath}
onClose={() => this.close()}
app={this.app}
plugin={this.plugin}
/>
);
}
onClose() {
const { contentEl } = this;
contentEl.empty();
}
}

89
src/components/modals/EditMetadataModal.tsx Normal file
View file

@ -0,0 +1,89 @@
import { App, Modal } from 'obsidian';
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import VisionRecallPlugin from '@/main';
import { tagsToCommaString } from '@/lib/tag-utils';
import { formatTags } from '@/lib/tag-utils';
interface EditMetadataModalProps {
metadata: any; // TODO: Add proper type
onSave: (updatedMetadata: any) => Promise<void>;
onClose: () => void;
}
const EditMetadataForm: React.FC<EditMetadataModalProps> = ({ metadata, onSave, onClose }) => {
const [tags, setTags] = useState(metadata.extractedTags?.join(', ') || '');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const updatedMetadata = {
...metadata,
extractedTags: tags.split(',').map(tag => tag.trim()).filter(tag => tag),
formattedTags: tagsToCommaString(formatTags(tags.split(',').map(tag => tag.trim()))),
};
await onSave(updatedMetadata);
onClose();
};
return (
<div className="edit-metadata-modal">
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="tags">Tags (comma-separated):</label>
<input
type="text"
id="tags"
value={tags}
onChange={(e) => setTags(e.target.value)}
placeholder="Enter tags separated by commas"
/>
</div>
<div className="button-group">
<button type="submit">Save Changes</button>
<button type="button" onClick={onClose}>Cancel</button>
</div>
</form>
</div>
);
};
export class EditMetadataModal extends Modal {
private metadata: any;
private plugin: VisionRecallPlugin;
private onSaveCallback: () => Promise<void>;
constructor(app: App, plugin: VisionRecallPlugin, metadata: any, onSave: () => Promise<void>) {
super(app);
this.metadata = metadata;
this.plugin = plugin;
this.onSaveCallback = onSave;
}
onOpen() {
const { contentEl, titleEl } = this;
titleEl.setText('Edit Screenshot Metadata');
const root = createRoot(contentEl);
const handleSave = async (updatedMetadata: any) => {
await this.plugin.screenshotProcessor.updateScreenshotMetadata(updatedMetadata);
await this.onSaveCallback();
};
root.render(
<EditMetadataForm
metadata={this.metadata}
onSave={handleSave}
onClose={() => this.close()}
/>
);
}
onClose() {
const { contentEl } = this;
contentEl.empty();
}
}

166
src/components/modals/FileUploadModal.tsx Normal file
View file

@ -0,0 +1,166 @@
import React, { StrictMode } from 'react';
import { Modal, App, Notice, TFile, normalizePath } from 'obsidian';
import VisionRecallPlugin from '@/main'; // Import your plugin main class
import { ObsidianAppContext, PluginContext } from '@/context';
import { Root, createRoot } from 'react-dom/client';
import { useState } from 'react';
import { ProcessingStatus } from '@/stores/queueStore';
interface FileUploadModalProps {
app: App;
plugin: VisionRecallPlugin; // Pass the plugin instance
refreshMetadata: () => Promise<void>;
updateStatus: (status: Partial<ProcessingStatus>) => void;
}
interface FileUploadViewProps extends FileUploadModalProps {
onFileUpload: (file: File) => Promise<void>;
closeFunction: () => void;
}
const FileUploadView = (props: FileUploadViewProps) => {
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSelectedFile(e.target.files?.[0] || null);
};
const handleFileUpload = async () => {
if (!selectedFile) {
new Notice('Please select an image file.');
return;
}
try {
props.onFileUpload(selectedFile)
.then(async () => {
await props.refreshMetadata();
})
.catch((error) => {
props.plugin.logger.error('File upload or processing error:', error);
new Notice(`Error processing ${selectedFile.name}. See console for details.`);
});
props.closeFunction();
} catch (error) {
props.plugin.logger.error('File upload error:', error);
new Notice('File upload failed. See console for details.');
}
};
const handleClipboardUpload = async () => {
try {
props.plugin.screenshotProcessor.uploadAndProcessScreenshotFromClipboard()
.then(async () => {
await props.refreshMetadata();
}, (error) => {
props.updateStatus({ isProcessing: false, message: '', progress: 0 });
console.error('Clipboard upload or processing error:', error);
new Notice('Clipboard upload failed. See console for details.');
});
props.closeFunction();
} catch (error) {
props.updateStatus({ isProcessing: false, message: '', progress: 0 });
console.error('Clipboard upload error:', error);
new Notice('Clipboard upload failed. See console for details.');
}
};
return (
<div className="file-upload-modal-content">
<div className="file-upload-container">
<input
type="file"
className="file-input"
accept="image/*"
onChange={handleFileChange}
/>
<button className="upload-button" onClick={handleFileUpload}>
Process Screenshot from File
</button>
</div>
<div className="clipboard-upload-button-container">
<button className="upload-button" onClick={handleClipboardUpload}>
Upload from Clipboard
</button>
</div>
</div>
);
};
export class FileUploadModal extends Modal {
root: Root;
plugin: VisionRecallPlugin;
fileInput: React.RefObject<HTMLInputElement>;
fileInputElement: HTMLInputElement;
refreshMetadata: () => Promise<void>;
updateStatus: (status: Partial<ProcessingStatus>) => void;
constructor({ app, plugin, refreshMetadata, updateStatus }: FileUploadModalProps) {
super(app);
this.plugin = plugin;
this.app = app;
this.fileInput = React.createRef<HTMLInputElement>();
this.refreshMetadata = refreshMetadata;
this.updateStatus = updateStatus;
}
onOpen() {
const { contentEl, modalEl } = this;
this.setTitle('Add a new screenshot');
this.root = createRoot(contentEl);
this.root.render(
<StrictMode>
<ObsidianAppContext.Provider value={this.app}>
<PluginContext.Provider value={this.plugin}>
<FileUploadView
app={this.app}
plugin={this.plugin}
closeFunction={() => this.close()}
refreshMetadata={this.refreshMetadata}
updateStatus={this.updateStatus}
onFileUpload={this.handleFileUpload.bind(this)}
/>
</PluginContext.Provider>
</ObsidianAppContext.Provider>
</StrictMode>,
);
}
onClose() {
this.root?.unmount();
const { contentEl } = this;
contentEl?.empty();
}
async handleFileUpload(file: File) {
try {
new Notice(`Processing ${file.name}...`);
const arrayBuffer = await file.arrayBuffer();
const intakeFolderPath = await this.plugin.getFolderFromSettingsKey('screenshotIntakeFolderPath');
const newFilePath = normalizePath(`${intakeFolderPath}/${file.name}`);
// Ensure intake folder exists - important to avoid errors
if (!this.app.vault.getFolderByPath(intakeFolderPath)) {
await this.app.vault.createFolder(intakeFolderPath);
}
// Create a temporary file in the vault
const tempFile = await this.app.vault.createBinary(newFilePath, arrayBuffer);
if (tempFile instanceof TFile) {
this.plugin.processingQueue.addToQueue(tempFile);
new Notice(`${file.name} added to processing queue!`);
} else {
new Notice('Failed to create image file in intake folder.');
}
} catch (error) {
this.plugin.logger.error('File upload or processing error:', error);
new Notice(`Error processing ${file.name}. See console for details.`);
}
}
}

185
src/components/modals/ProcessingQueueModal.tsx Normal file
View file

@ -0,0 +1,185 @@
import React, { useState, useEffect, StrictMode } from 'react';
import { Root, createRoot } from 'react-dom/client';
import { App, Modal } from 'obsidian';
import VisionRecallPlugin from '@/main';
import { ObsidianAppContext, PluginContext, usePlugin } from '@/context';
import { cn } from '@/lib/utils';
import { QueueItem } from '@/services/ProcessingQueue';
import { useQueueStore } from '@/stores/queueStore';
import { ProcessingQueue } from '@/services/ProcessingQueue';
import { CheckCircle2, XCircle, Pause, Play, Square } from 'lucide-react';
import { ProcessingDisplay } from '@/components/ProcessingDisplay';
const QueueControls: React.FC = () => {
const { status, actions } = useQueueStore();
const plugin = usePlugin();
const hasPendingItems = status.queue.some(item => item.status === 'pending');
const shouldShowControls = status.isProcessing || status.isPaused || hasPendingItems || status.isStopped;
const handleResume = () => {
plugin.processingQueue.resumeProcessing();
plugin.processingQueue.processQueue();
};
return (
<div className="queue-controls flex flex-row items-center gap-2 mb-4 mx-auto justify-center">
{shouldShowControls ? (
<>
{status.isProcessing ? (
// Show Pause + Stop when actively processing
<>
<button
onClick={() => plugin.processingQueue.pauseProcessing()}
className="queue-control-button flex items-center gap-2"
aria-label="Pause processing"
>
<Pause className="w-4 h-4" />
Pause
</button>
<button
onClick={() => plugin.processingQueue.stopProcessing()}
className="queue-control-button flex items-center gap-2"
aria-label="Stop processing"
>
<Square className="w-4 h-4" />
Stop
</button>
</>
) : status.isPaused || status.isStopped ? (
// Show Resume when paused or stopped
<button
onClick={handleResume}
className="queue-control-button flex items-center gap-2"
aria-label="Resume processing"
>
<Play className="w-4 h-4" />
Resume
</button>
) : hasPendingItems ? (
// Show Start when neither processing, paused, nor stopped
<button
onClick={() => plugin.processingQueue.processQueue()}
className="queue-control-button flex items-center gap-2"
aria-label="Start processing"
>
<Play className="w-4 h-4" />
Start
</button>
) : null}
</>
) : null}
</div>
);
};
const QueueStatus: React.FC = () => {
const { status } = useQueueStore();
return (
<div className="queue-status mb-4 mx-auto justify-center">
<div className="text-sm font-medium">
{status.isProcessing ? (
status.isPaused ? (
<span className="text-yellow-500">⏸ Processing Paused</span>
) : (
<span className="text-green-500">▶ Processing Active</span>
)
) : status.queue.some(item => item.status === 'pending') ? (
<span className="text-muted">⏹ Processing Stopped</span>
) : (
<span className="text-muted">Queue Empty</span>
)}
</div>
</div>
);
};
const ProcessingQueueView: React.FC = () => {
const { status, actions } = useQueueStore();
const plugin = usePlugin();
useEffect(() => {
plugin.processingQueue = new ProcessingQueue(plugin, useQueueStore);
}, []);
return (
<div className="processing-queue-modal w-full">
<div className="queue-stats flex flex-row items-center justify-between gap-1 w-full mb-4 p-2 bg-secondary rounded">
<div>Total: {status.queue.length}</div>
<div>Processing: {status.queue.filter(i => i.status === 'processing').length}</div>
<div>Pending: {status.queue.filter(i => i.status === 'pending').length}</div>
<div>Completed: {status.queue.filter(i => i.status === 'completed').length}</div>
<div>Failed: {status.queue.filter(i => i.status === 'failed').length}</div>
</div>
<div className="queue-items mb-4">
{status.queue.map((item, index) => (
<div
key={index + '-queue-item'}
className={cn(
'flex flex-row items-center justify-start gap-4 overflow-hidden p-2 rounded-m',
item.status === 'processing' && 'status-processing',
item.status === 'completed' && 'status-completed',
item.status === 'failed' && 'status-failed'
)}>
<div className="flex items-center">
{item.status === 'processing' && <span className="loading-spinner"></span>}
{item.status === 'completed' && <CheckCircle2 className="w-4 h-4" />}
{item.status === 'failed' && <XCircle className="w-4 h-4" />}
{item.status === 'pending' && <div className="w-4 h-4 rounded-full border-2 border-muted"></div>}
</div>
<div className="item-name flex-1">{item.file.name}</div>
{item.error && <div className="item-error text-error text-sm">{item.error}</div>}
</div>
))}
</div>
<QueueStatus />
<QueueControls />
{/* Only show ProcessingDisplay if we're processing and not paused */}
{status.isProcessing && !status.isPaused && <ProcessingDisplay />}
</div>
);
};
interface ProcessingQueueModalProps {
app: App;
plugin: VisionRecallPlugin;
}
export class ProcessingQueueModal extends Modal {
root: Root;
plugin: VisionRecallPlugin;
constructor({ app, plugin }: ProcessingQueueModalProps) {
super(app);
this.app = app;
this.plugin = plugin;
}
onOpen() {
const { contentEl, titleEl } = this;
titleEl.setText('Processing Queue');
this.root = createRoot(contentEl);
this.root.render(
<StrictMode>
<ObsidianAppContext.Provider value={this.app}>
<PluginContext.Provider value={this.plugin}>
<ProcessingQueueView />
</PluginContext.Provider>
</ObsidianAppContext.Provider>
</StrictMode>
);
}
onClose() {
this.root?.unmount();
const { contentEl } = this;
contentEl?.empty();
}
}

48
src/components/modals/ScreenshotModal.tsx Normal file
View file

@ -0,0 +1,48 @@
import { Modal, App, TFile } from 'obsidian';
interface ScreenshotModalProps {
imagePath: string;
onClose: () => void;
}
export class ScreenshotModal extends Modal {
imagePath: string;
constructor(app: App, imagePath: string) {
super(app);
this.imagePath = imagePath;
this.app = app;
}
onOpen() {
const { contentEl } = this;
this.setTitle('Screenshot Preview');
contentEl.addClass('screenshot-modal-content');
// Create a link element
const linkEl = contentEl.createEl('a', { cls: 'screenshot-modal-link' });
// Set the link to open the image in Obsidian
const file = this.app.vault.getAbstractFileByPath(this.imagePath);
if (file instanceof TFile) {
linkEl.addEventListener('click', async (e) => {
e.preventDefault();
await this.app.workspace.openLinkText(this.imagePath, '', true);
this.close();
});
}
// Create and append the image to the link
const imgEl = linkEl.createEl('img', { cls: 'screenshot-modal-image' });
const imageUrl = this.app.vault.getResourcePath(this.app.vault.getAbstractFileByPath(this.imagePath) as TFile);
imgEl.src = imageUrl;
// Append the link (containing the image) to the modal
contentEl.appendChild(linkEl);
}
onClose() {
this.contentEl.empty();
}
}

168
src/components/modals/TestConfigModal.tsx Normal file
View file

@ -0,0 +1,168 @@
import { App, Modal, Notice } from 'obsidian';
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import VisionRecallPlugin from '@/main';
import { DateTime } from 'luxon';
import { DataManager } from '@/data/DataManager';
import { getModels } from '@/services/llm-service';
interface TestConfigModalProps {
dataManager: DataManager;
plugin: VisionRecallPlugin;
onClose: () => void;
}
const TestConfigView: React.FC<TestConfigModalProps> = ({ dataManager, plugin, onClose }) => {
const settings = plugin.settings;
const [models, setModels] = useState<string[]>([]);
// const [error, setError] = useState<string | null>('duke');
const [error, setError] = useState<string | null>(null);
const testConnection = async () => {
try {
const models = await getModels(settings);
setModels(models);
plugin.logger.info(models);
} catch (error) {
plugin.logger.error(error);
setError(error as string);
}
}
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
// Optional: Add some visual feedback
plugin.logger.info(`Copied ${text} to clipboard`);
new Notice('Copied to clipboard');
};
return (
<div className='flex flex-col gap-4 items-center justify-center'>
<details className='w-full'>
<summary
aria-label='Expand LLM Configuration'
className='text-lg font-bold cursor-pointer text-center mx-auto'
>
LLM Configuration
</summary>
<div className="settings-display">
<div className="setting-item">
<div className="setting-label">Provider:</div>
<div className="setting-value">{settings.llmProvider}</div>
</div>
<div className="setting-item">
<div className="setting-label">API Key:</div>
<div className="setting-value">
{settings.apiKey ? '********' : 'Not set'}
</div>
</div>
<div className="setting-item">
<div className="setting-label">API Base URL:</div>
<div className="setting-value">
{settings.apiBaseUrl || 'Default'}
</div>
</div>
<div className="setting-item">
<div className="setting-label">Vision Model:</div>
<div className="setting-value">
{settings.visionModelName}
</div>
</div>
<div className="setting-item">
<div className="setting-label">Endpoint LLM Model:</div>
<div className="setting-value">
{settings.endpointLlmModelName}
</div>
</div>
</div>
</details>
<div className='flex flex-col gap-4 items-center justify-center'>
<button
type="button"
onClick={() => testConnection()}
className='cursor-pointer'
>
Test Connection — Retrieve Models
</button>
</div>
<div className='flex flex-col gap-4 items-center justify-center w-full'>
<h3 className='text-lg/0 p-0 m-0'>Models</h3>
<div className='relative block min-w-full overflow-y-auto h-48'>
{error && (
<div className='text-center text-sm text-text-muted w-full mb-8'>
<div className='text-red'>Connection unsuccessful.<br /><br />Error message:</div>
{error}
</div>
)}
{models.length > 0 ? (
<div className='flex flex-col gap-1 items-center justify-center w-full'>
{models.map((model) => (
<div
key={model}
aria-label={'Copy to clipboard'}
data-tooltip-delay={0}
onClick={() => copyToClipboard(model)}
className="model-item"
>
{model}
</div>
))}
</div>
) : (
<div className='text-center text-sm text-text-muted'>No models found</div>
)}
</div>
</div>
<div className="button-group">
<button type="button" onClick={onClose}>Close</button>
</div>
</div>
);
};
export class TestConfigModal extends Modal {
private metadata: any;
private plugin: VisionRecallPlugin;
constructor(app: App, plugin: VisionRecallPlugin, metadata: any) {
super(app);
this.metadata = metadata;
this.plugin = plugin;
}
onOpen() {
const { contentEl, titleEl } = this;
titleEl.setText('Test Config');
const root = createRoot(contentEl);
root.render(
<TestConfigView
dataManager={this.plugin.dataManager}
plugin={this.plugin}
onClose={() => this.close()}
/>
);
}
onClose() {
const { contentEl } = this;
contentEl.empty();
}
}
// Add some CSS styles
// const styles = `
// `;
// // Add styles to document
// const styleSheet = document.createElement('style');
// styleSheet.innerText = styles;
// document.head.appendChild(styleSheet);

104
src/components/modals/ViewMetadataModal.tsx Normal file
View file

@ -0,0 +1,104 @@
import { App, Modal } from 'obsidian';
import React from 'react';
import { createRoot } from 'react-dom/client';
import VisionRecallPlugin from '@/main';
import { DateTime } from 'luxon';
interface ViewMetadataModalProps {
metadata: any; // TODO: Add proper type
onClose: () => void;
}
const ViewMetadataForm: React.FC<ViewMetadataModalProps> = ({ metadata, onClose }) => {
return (
<div className="view-metadata-modal select-text">
<div className="metadata-section">
<h4>File Information</h4>
<div className="metadata-group">
<label>Screenshot Filename:</label>
<div className="metadata-value">{metadata.screenshotFilename}</div>
</div>
<div className="metadata-group">
<label>Note Path:</label>
<div className="metadata-value">{metadata.notePath}</div>
</div>
<div className="metadata-group">
<label>Created:</label>
<div className="metadata-value">
{DateTime.fromISO(metadata.timestamp).toFormat('yyyy/MM/dd HH:mm:ss')}
</div>
</div>
</div>
<div className="metadata-section">
<h4>Content Analysis</h4>
{metadata.ocrText && (
<div className="metadata-group">
<label>OCR Text:</label>
<div className="metadata-value scrollable">{metadata.ocrText}</div>
</div>
)}
{metadata.visionLLMResponse && (
<div className="metadata-group">
<label>Vision Analysis:</label>
<div className="metadata-value scrollable">{metadata.visionLLMResponse}</div>
</div>
)}
{metadata.generatedNotes && (
<div className="metadata-group">
<label>Generated Notes:</label>
<div className="metadata-value scrollable">{metadata.generatedNotes}</div>
</div>
)}
</div>
<div className="metadata-section">
<h4>Tags</h4>
<div className="metadata-group">
<div className="metadata-value tags">
{metadata.extractedTags && metadata.extractedTags.length > 0
? metadata.extractedTags.map((tag: string, index: number) => (
<span key={index} className="tag">#{tag}</span>
))
: <span className="no-tags">No tags</span>
}
</div>
</div>
</div>
<div className="button-group">
<button type="button" onClick={onClose}>Close</button>
</div>
</div>
);
};
export class ViewMetadataModal extends Modal {
private metadata: any;
private plugin: VisionRecallPlugin;
constructor(app: App, plugin: VisionRecallPlugin, metadata: any) {
super(app);
this.metadata = metadata;
this.plugin = plugin;
}
onOpen() {
const { contentEl, titleEl } = this;
titleEl.setText('Screenshot Details');
const root = createRoot(contentEl);
root.render(
<ViewMetadataForm
metadata={this.metadata}
onClose={() => this.close()}
/>
);
}
onClose() {
const { contentEl } = this;
contentEl.empty();
}
}

119
src/components/ui/tag-combobox.tsx Normal file
View file

@ -0,0 +1,119 @@
import { X } from 'lucide-react';
import React, { useState, useEffect } from 'react';
interface TagComboboxProps {
availableTags: string[]; // Array of all possible tags
tagCounts: Record<string, number>; // Record of tag counts
onTagChange: (selectedTags: string[]) => void; // Callback when tags change
initialTags?: string[]; // Optional: Initial tags to pre-select
isInclusive: boolean; // Whether the tags are inclusive or exclusive
onInclusiveChange: (inclusive: boolean) => void; // Callback when inclusive changes
}
const TagCombobox: React.FC<TagComboboxProps> = ({
availableTags,
tagCounts,
onTagChange,
initialTags = [],
isInclusive,
onInclusiveChange
}) => {
const [inputValue, setInputValue] = useState('');
const [suggestions, setSuggestions] = useState<string[]>([]);
const [selectedTags, setSelectedTags] = useState<string[]>(initialTags);
// ... (rest of the component logic will go here)
useEffect(() => {
onTagChange(selectedTags); // Call the callback whenever selectedTags changes
}, [selectedTags, onTagChange]); // Dependency array ensures effect runs when these change
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
setInputValue(value);
// Filter suggestions based on input value
const filteredSuggestions = availableTags.filter(
(tag) => tag.toLowerCase().includes(value.toLowerCase()) && !selectedTags.includes(tag) // Don't suggest already selected tags
);
setSuggestions(filteredSuggestions.sort((a, b) => tagCounts[b] - tagCounts[a]));
};
const handleSelectSuggestion = (tag: string) => {
if (!selectedTags.includes(tag)) {
setSelectedTags([...selectedTags, tag]);
}
setInputValue(''); // Clear input after selecting a tag
setSuggestions([]); // Hide suggestions
};
const handleRemoveTag = (tagToRemove: string) => {
setSelectedTags(selectedTags.filter((tag) => tag !== tagToRemove));
};
const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === 'Enter') {
event.preventDefault(); // Prevent form submission if inside a form
if (inputValue.trim() !== "") {
// Treat the input value as a new tag if it's not empty and not already selected
const newTag = inputValue.trim();
if (!selectedTags.includes(newTag) && availableTags.includes(newTag)) { // Optional: Only allow tags from availableTags or allow free-form tags
handleSelectSuggestion(newTag);
} else if (!selectedTags.includes(newTag) && !availableTags.includes(newTag)) {
//Optionally allow free-form tags that are not in availableTags
handleSelectSuggestion(newTag);
}
}
}
};
return (
<div className="tag-combobox w-full">
<div className="flex flex-row items-center gap-2 w-full justify-center">
<input
type="text"
className=" w-full"
placeholder="Type to add tags..."
value={inputValue}
onChange={handleInputChange}
onKeyDown={handleInputKeyDown} // For handling Enter key
/>
<button
aria-label={`Make tags ${isInclusive ? "exclusive" : "inclusive"}`}
className="cursor-pointer"
onClick={() => onInclusiveChange(!isInclusive)}
>
{isInclusive ? "Inclusive" : "Exclusive"}
</button>
</div>
{suggestions.length > 0 && (
<ul className="suggestions-list">
{suggestions.map((suggestion) => (
<li key={suggestion} onClick={() => handleSelectSuggestion(suggestion)}>
{suggestion} ({tagCounts[suggestion]})
</li>
))}
</ul>
)}
<div className="selected-tags">
{selectedTags.map((tag) => (
<span key={tag} className="tag-pill">
{tag}
<button
aria-label={`Remove tag`}
className="remove-tag-button"
onClick={() => handleRemoveTag(tag)}
>
<X className="w-4 h-4" />
</button>
</span>
))}
</div>
</div>
);
};
export default TagCombobox;

16
src/constants.ts Normal file
View file

@ -0,0 +1,16 @@
export const PLUGIN_NAME = 'Vision Recall'
export const PLUGIN_ICON = 'image'
export const IS_DEV = process.env.NODE_ENV === 'development'
export const STORAGE_KEYS = {
ITEMS_PER_PAGE: 'vision-recall-items-per-page',
SORT_CRITERIA: 'vision-recall-sort-criteria',
INITIALIZE_FOLDERS: 'vision-recall-initialize-folders'
};
export const DEFAULT_ITEMS_PER_PAGE = 12;
export const OPENROUTER_HEADERS = {
'HTTP-Referer': 'https://visionrecall.com',
'X-Title': 'Vision Recall'
}

32
src/context.ts Normal file
View file

@ -0,0 +1,32 @@
import { App } from "obsidian";
import * as React from "react";
import VisionRecallPlugin from "@/main"; // Import your plugin class
// App context
export const AppContext = React.createContext<App | undefined>(undefined);
// Event target context
export const EventTargetContext = React.createContext<EventTarget | undefined>(undefined);
// New Context for Obsidian App
export const ObsidianAppContext = React.createContext<App | undefined>(undefined);
export const useObsidianApp = () => {
const context = React.useContext(ObsidianAppContext);
if (!context) {
throw new Error("useObsidianApp must be used within an ObsidianAppContextProvider");
}
return context;
};
// Plugin context
export const PluginContext = React.createContext<VisionRecallPlugin | undefined>(undefined);
// Custom hook to use the plugin context
export const usePlugin = <T extends VisionRecallPlugin>(): T => {
const context = React.useContext(PluginContext);
if (!context) {
throw new Error("usePlugin must be used within a PluginContextProvider");
}
return context as T;
};

114
src/data/DataContext.tsx Normal file
View file

@ -0,0 +1,114 @@
import React, { createContext, useContext, useEffect, useState } from 'react';
import { DataManager, UserData } from './DataManager';
import { Config } from '@/types/config-types';
import { customStringify } from '@/lib/json-utils';
interface DataContextType {
entries: UserData[];
addEntry: (entry: UserData) => Promise<void>;
removeEntry: (id: string) => Promise<void>;
refreshEntries: () => Promise<void>;
getConfig: () => Promise<Config>;
getConfigSynchronous: () => Config;
setConfig: (config: Config) => Promise<void>;
getAvailableTags: () => Set<string>;
setAvailableTags: (tags: Set<string>) => Promise<void>;
getTagCounts: () => Record<string, number>;
setTagCounts: (counts: Record<string, number>) => Promise<void>;
}
const DataContext = createContext<DataContextType | undefined>(undefined);
export const useDataContext = () => {
const context = useContext(DataContext);
if (!context) throw new Error('useDataContext must be used within a DataProvider');
return context;
};
export const DataProvider: React.FC<{ dataManager: DataManager; children: React.ReactNode }> = ({ dataManager, children }) => {
const [entries, setEntries] = useState<UserData[]>([]);
// Function to update state properly
const refreshEntries = async () => {
const updatedEntries = dataManager.getAllEntries();
setEntries(updatedEntries);
dataManager.plugin.logger.info(`🔄 DataProvider: Updated Entries`, updatedEntries.length);
};
useEffect(() => {
dataManager.plugin.logger.info(`Processed Hashes: ${customStringify(dataManager.getProcessedHashes())}`);
}, [dataManager]);
useEffect(() => {
refreshEntries(); // Load initial data
const updateEntries = () => {
dataManager.plugin.logger.info(`📢 DataProvider: "data-updated" event received`);
refreshEntries();
};
dataManager.on('data-updated', updateEntries); // Listen for updates
return () => {
dataManager.off('data-updated', updateEntries); // Cleanup
};
}, [dataManager]); // Runs when `dataManager` changes
const addEntry = async (entry: UserData) => {
await dataManager.addOrUpdateEntry(entry);
await refreshEntries(); // Ensure immediate UI update
};
const removeEntry = async (id: string) => {
await dataManager.removeEntry(id);
await refreshEntries(); // Ensure immediate UI update
};
const getConfig = async () => {
return await dataManager.getConfig();
};
const getConfigSynchronous = () => {
return dataManager.getConfigSynchronous();
};
const setConfig = async (config: Config) => {
await dataManager.updateConfig(config);
};
const getAvailableTags = () => {
return dataManager.getAvailableTags();
};
const setAvailableTags = async (tags: Set<string>) => {
await dataManager.setAvailableTags(tags);
};
const getTagCounts = () => {
return dataManager.getTagCounts();
};
const setTagCounts = async (counts: Record<string, number>) => {
await dataManager.setTagCounts(counts);
};
return (
<DataContext.Provider
value={{
entries,
addEntry,
removeEntry,
refreshEntries,
getConfig,
getConfigSynchronous,
setConfig,
getAvailableTags,
setAvailableTags,
getTagCounts,
setTagCounts
}}
>
{children}
</DataContext.Provider>
);
};

451
src/data/DataManager.ts Normal file
View file

@ -0,0 +1,451 @@
import VisionRecallPlugin from '@/main';
import { Low, Memory } from 'lowdb';
import { DateTime } from 'luxon';
import { Events, normalizePath } from 'obsidian';
import { Config, DefaultConfig } from '@/types/config-types';
import { ProcessedFileRecord } from '@/types/processing-types';
import { customParse, customStringify } from '@/lib/json-utils';
import { DEFAULT_SETTINGS, VisionRecallPluginSettings } from '@/types/settings-types';
import { useQueueStore } from '@/stores/queueStore';
/** Defines the structure of a single user data entry (metadata) */
export interface UserData {
id: string; // The only required field (unique identifier)
originalFilename?: string;
screenshotFilename?: string;
screenshotStoragePath?: string;
notePath?: string;
noteTitle?: string;
ocrText?: string | null;
visionLLMResponse?: string | null;
generatedNotes?: string | null;
extractedTags?: string[];
// formattedTags?: string[];
formattedTags?: string;
// settingsUsed?: Record<string, any>; // Snapshot of settings used
timestamp?: string; // ISO date string
metadataFilename?: string;
metadataPath?: string;
uniqueName?: string;
uniqueTag?: string;
/** Allows additional key-value pairs for extensibility */
[key: string]: unknown;
}
/** Defines the structure of stored data, keeping list/map for efficient lookups */
export interface StoredData extends VisionRecallPluginSettings {
userData: {
list: string[]; // Maintains entry order
map: Record<string, UserData>; // Maps ID -> entry for quick lookup
};
config: Config;
availableTags: Set<string>;
tagCounts: Record<string, number>;
processedFileRecords: Record<string, ProcessedFileRecord>;
processedHashes: Set<string>;
minimizedProgressDisplay: boolean;
[key: string]: unknown;
}
/** Default empty structure to initialize LowDB */
const DEFAULT_DATA: StoredData = {
...DEFAULT_SETTINGS,
userData: {
list: [],
map: {}
},
config: DefaultConfig,
availableTags: new Set(),
tagCounts: {},
processedFileRecords: {},
processedHashes: new Set(),
minimizedProgressDisplay: false
};
/** Manages persistent user data using LowDB and Obsidian's saveData */
export class DataManager extends Events {
private db: Low<StoredData>;
plugin: VisionRecallPlugin;
private pollIntervalId: number | null = null;
constructor(plugin: VisionRecallPlugin) {
super();
this.plugin = plugin;
this.db = new Low(new Memory(), DEFAULT_DATA);
// Cleanup interval when plugin unloads
plugin.register(() => this.stopIntakeDirectoryPolling());
}
/** Initialize and load user data, preserving other settings */
async init() {
try {
const savedData = await this.plugin.loadData();
const parsedData = customParse(savedData) as StoredData;
// Initialize with default data structure
this.db.data = { ...DEFAULT_DATA };
// Carefully merge saved data with defaults
if (parsedData) {
// Merge userData
if (parsedData.userData) {
this.db.data.userData = {
list: Array.isArray(parsedData.userData.list) ? parsedData.userData.list : [],
map: typeof parsedData.userData.map === 'object' ? parsedData.userData.map : {}
};
}
// Merge config
if (parsedData.config) {
this.db.data.config = {
...DefaultConfig,
...parsedData.config
};
}
// Merge sets and maps
if (parsedData.processedFileRecords) {
this.db.data.processedFileRecords = parsedData.processedFileRecords;
}
if (parsedData.processedHashes) {
this.db.data.processedHashes = new Set(Array.from(parsedData.processedHashes));
}
if (parsedData.availableTags) {
this.db.data.availableTags = new Set(Array.from(parsedData.availableTags));
}
if (parsedData.tagCounts) {
this.db.data.tagCounts = parsedData.tagCounts;
}
this.db.data.minimizedProgressDisplay = !!parsedData.minimizedProgressDisplay;
}
await this.db.write();
this.plugin.logger.info('DataManager initialized successfully');
} catch (error) {
this.plugin.logger.error('Failed to initialize DataManager:', error);
throw error; // Re-throw to be caught by the plugin's error handler
}
}
getAllData() {
return this.db.data;
}
/** Convert UserData into a JSON-safe format */
private sanitizeForSaving(entry: UserData): Record<string, any> {
return JSON.parse(
JSON.stringify(entry, (key, value) => {
if (value instanceof Date) {
return value.toISOString(); // Convert Date to string
}
if (typeof value === 'undefined') {
return null; // Convert undefined to null
}
return value; // Default case
})
);
}
/** Convert loaded JSON back into UserData with correct types */
private restoreFromLoad(data: Record<string, any>): UserData {
const restored = { ...data } as UserData;
// Ensure timestamp is restored as a string (or null)
if (typeof restored.timestamp === 'string') {
restored.timestamp = restored.timestamp; // Already valid
}
return restored;
}
/** Get all user entries, restoring from JSON format */
getAllEntries(): UserData[] {
return this.db.data.userData.list.map(id =>
this.restoreFromLoad(this.db.data.userData.map[id])
);
}
/** Get a single entry by ID */
getEntry(id: string): UserData | undefined {
const entry = this.db.data.userData.map[id];
return entry ? this.restoreFromLoad(entry) : undefined;
}
/** Add or update an entry, ensuring JSON safety */
async addOrUpdateEntry(entry: UserData) {
if (!this.db.data.userData.map[entry.id]) {
this.db.data.userData.list.push(entry.id); // Maintain order
}
this.db.data.userData.map[entry.id] = this.sanitizeForSaving(entry) as UserData;
await this.persist();
}
/** Remove an entry */
async removeEntry(id: string) {
if (!this.db.data.userData.map[id]) return;
this.db.data.userData.list = this.db.data.userData.list.filter(existingId => existingId !== id);
delete this.db.data.userData.map[id];
await this.persist();
}
/** Persist changes while preserving other settings */
private async persist() {
const existingData = await this.plugin.loadData();
const parsedExistingData = customParse(existingData) as StoredData;
const dataToPersist = {
...parsedExistingData, // Keep other settings unchanged
userData: this.db.data.userData, // Update only userData
config: this.db.data.config, // Update config
availableTags: this.db.data.availableTags,
tagCounts: this.db.data.tagCounts,
processedFileRecords: this.db.data.processedFileRecords,
processedHashes: this.db.data.processedHashes,
minimizedProgressDisplay: this.db.data.minimizedProgressDisplay
}
await this.plugin.saveData(customStringify(dataToPersist));
this.trigger('data-updated'); // Notify listeners
// await this.persistDataToFile(); // Persist data to file
}
async persistDataToFile(backup: boolean = false) {
if (!this.db.data.userData || Object.keys(this.db.data.userData.map).length == 0) {
this.plugin.logger.warn('DataManager: No user data to persist.');
return;
}
const dataToSave = {
userData: this.db.data.userData, // Update only userData
config: this.db.data.config, // Update config
availableTags: this.db.data.availableTags,
tagCounts: this.db.data.tagCounts,
processedFileRecords: this.db.data.processedFileRecords,
processedHashes: this.db.data.processedHashes,
minimizedProgressDisplay: this.db.data.minimizedProgressDisplay
};
const dataStr = customStringify(dataToSave, true);
const filename = backup ? 'userData_backup.json' : 'userData.json';
const screenshotStorageFolder = this.plugin.getFolderFromSettingsKey('screenshotStorageFolderPath');
const persistFileLocation = normalizePath(`${screenshotStorageFolder}/${filename}`);
if (!this.plugin.app.vault.getAbstractFileByPath(persistFileLocation)) {
await this.plugin.app.vault.create(persistFileLocation, dataStr);
this.plugin.logger.info("created new file", persistFileLocation);
} else {
const file = this.plugin.app.vault.getFileByPath(persistFileLocation);
if (file) { // If the file exists, rename it and create a new one with the current date
const newLocationForExistingFile = normalizePath(`${screenshotStorageFolder}/${filename}_${DateTime.now().toFormat('yyyy-MM-dd')}`);
this.plugin.logger.info("newLocationForExistingFile", newLocationForExistingFile);
// Essentially creates a daily backup
if (!this.plugin.app.vault.getAbstractFileByPath(newLocationForExistingFile)) {
const currentFileContent = await this.plugin.app.vault.read(file);
await this.plugin.app.vault.create(newLocationForExistingFile, currentFileContent);
this.plugin.logger.info("created new backup file", newLocationForExistingFile);
}
await this.plugin.app.vault.modify(file, dataStr);
this.plugin.logger.info("modified existing file", file.path);
}
}
}
/** Export userData as a JSON file */
async exportUserData(): Promise<Blob> {
if (!this.db.data.userData) {
this.plugin.logger.warn('DataManager: No user data to export.');
return new Blob(['{}'], { type: 'application/json' });
}
const dataToSave = {
userData: this.db.data.userData, // Update only userData
config: this.db.data.config, // Update config
availableTags: this.db.data.availableTags,
tagCounts: this.db.data.tagCounts,
processedFileRecords: this.db.data.processedFileRecords,
processedHashes: this.db.data.processedHashes,
minimizedProgressDisplay: this.db.data.minimizedProgressDisplay
};
const dataStr = customStringify(dataToSave, true);
return new Blob([dataStr], { type: 'application/json' });
}
/** Import userData from a JSON file */
async importUserData(jsonData: string) {
try {
const parsedData = customParse(jsonData) as StoredData;
// Ensure the imported data has the right structure
// if (!parsedData || typeof parsedData !== 'object' || !Array.isArray(parsedData.userData.list) || typeof parsedData.userData.map !== 'object') {
// throw new Error('Invalid userData format.');
// }
// Merge new user data with the existing database
// this.db.data.userData = parsedData.userData;
this.db.data = parsedData;
await this.persist();
} catch (error) {
this.plugin.logger.error('Failed to import userData:', error);
throw new Error('Invalid JSON file. Please ensure it is correctly formatted.');
}
}
async getConfig() {
return this.db.data.config || {};
}
getConfigSynchronous() {
return this.db.data.config || {};
}
async updateConfig(updatedConfig: Partial<Config>) {
this.db.data.config = {
...this.db.data.config,
...updatedConfig
};
await this.persist();
}
getProcessedFileRecords() {
return this.db.data.processedFileRecords;
}
getProcessedHashes() {
return this.db.data.processedHashes;
}
async addProcessedFileRecord(filePath: string, record: ProcessedFileRecord) {
this.db.data.processedFileRecords[filePath] = record;
await this.persist();
}
async removeProcessedFileRecord(filePath: string) {
delete this.db.data.processedFileRecords[filePath];
await this.persist();
}
async addProcessedHash(hash: string) {
this.db.data.processedHashes.add(hash);
await this.persist();
}
async removeProcessedHash(hash: string) {
this.db.data.processedHashes.delete(hash);
await this.persist();
}
async addProcessedFileRecordAndHash(filePath: string, record: ProcessedFileRecord, hash: string) {
this.db.data.processedFileRecords[filePath] = record;
this.db.data.processedHashes.add(hash);
await this.persist();
}
async removeProcessedFileRecordAndHash(filePath: string, hash: string) {
delete this.db.data.processedFileRecords[filePath];
this.db.data.processedHashes.delete(hash);
await this.persist();
}
async startIntakeDirectoryPolling() {
// consider intakeFolderPollingInterval as seconds (so convert to ms)
const interval = (this.db.data.config.intakeFolderPollingInterval || DefaultConfig.intakeFolderPollingInterval) * 1000;
if (interval < 30000) {
this.plugin.logger.warn('DataManager: Intake folder polling interval is less than 30 seconds. This is not recommended.');
return;
}
this.pollIntervalId = window.setInterval(
() => this.plugin.screenshotProcessor.processIntakeFolderAuto(),
interval
);
}
stopIntakeDirectoryPolling() {
if (this.pollIntervalId) {
window.clearInterval(this.pollIntervalId);
this.pollIntervalId = null;
}
}
private async checkForUnprocessedImages() {
const periodicProcessingEnabled = await this.plugin.periodicProcessingEnabled();
if (!periodicProcessingEnabled) return;
const intakeDir = await this.plugin.getFolderFromSettingsKey('screenshotIntakeFolderPath');
const storageDir = await this.plugin.getFolderFromSettingsKey('screenshotStorageFolderPath');
if (!intakeDir || !storageDir) {
this.plugin.logger.warn('Intake or storage directory not configured');
return;
}
const normalizedIntakeDir = normalizePath(intakeDir);
const allFiles = this.plugin.app.vault.getFiles();
// Simplified check - any image in intake directory is considered unprocessed
const unprocessed = allFiles.filter(file => {
const ext = file.extension.toLowerCase();
return file.path.startsWith(normalizedIntakeDir) &&
['png', 'jpg', 'jpeg', 'gif', 'webp'].includes(ext);
});
if (unprocessed.length > 0) {
this.plugin.logger.info(`Found ${unprocessed.length} new images to process`);
this.trigger('unprocessed-images-found', unprocessed);
}
}
getCurrentlyProcessing() {
return useQueueStore.getState().status.isProcessing;
}
async setCurrentlyProcessing(processing: boolean) {
useQueueStore.getState().actions.updateStatus({ isProcessing: processing });
}
getMinimizedProgressDisplay() {
return this.db.data.minimizedProgressDisplay;
}
async setMinimizedProgressDisplay(minimized: boolean) {
this.db.data.minimizedProgressDisplay = minimized;
await this.persist();
}
getAvailableTags() {
return this.db.data.availableTags;
}
async setAvailableTags(tags: Set<string>) {
this.db.data.availableTags = tags;
await this.persist();
}
getTagCounts() {
return this.db.data.tagCounts;
}
async setTagCounts(counts: Record<string, number>) {
this.db.data.tagCounts = counts;
await this.persist();
}
}

27
src/data/reference.ts Normal file
View file

@ -0,0 +1,27 @@
export function getEndpointPromptGeneric(definingText: string, includeVisionAnalysis: boolean = true) {
return `The following text${includeVisionAnalysis ? ' and vision analysis' : ''} is from ${definingText}. Summarize the main topic and key information/arguments.`;
}
export const visionLLMResponseCategoriesMap = {
"youtube comment": `The following text is from a YouTube comment. Summarize key findings, experiences, or opinions, focusing on actionable takeaways.`,
"web page": getEndpointPromptGeneric("a web page screenshot"),
"email": getEndpointPromptGeneric("an email screenshot"),
"reddit comment": getEndpointPromptGeneric("a Reddit comment"),
"tweet": getEndpointPromptGeneric("a Twitter comment or Tweet"),
"instagram comment": getEndpointPromptGeneric("an Instagram comment"),
"tiktok comment": getEndpointPromptGeneric("a TikTok comment"),
"discord message": getEndpointPromptGeneric("a Discord message"),
"telegram message": getEndpointPromptGeneric("a Telegram message"),
"default": `The following OCR text and vision analysis are from a screenshot. Summarize and synthesize the text and vision analysis and identify key information.`,
}

36
src/lib/Logger.ts Normal file
View file

@ -0,0 +1,36 @@
// import VisionRecallPlugin from '@/main';
import { IS_DEV, PLUGIN_NAME } from '@/constants';
import { VisionRecallPluginSettings } from '@/types/settings-types';
export class PluginLogger {
// private plugin: VisionRecallPlugin;
settings: VisionRecallPluginSettings;
constructor(settings: VisionRecallPluginSettings) {
this.settings = settings;
}
private shouldLog(): boolean {
return IS_DEV || this.settings.debugMode;
}
info(...args: any[]): void {
if (this.shouldLog()) {
console.info(`[${PLUGIN_NAME}] INFO:`, ...args);
}
}
debug(...args: any[]): void {
if (this.shouldLog()) {
console.debug(`[${PLUGIN_NAME}] DEBUG:`, ...args);
}
}
warn(...args: any[]): void {
console.warn(`[${PLUGIN_NAME}] WARN:`, ...args);
}
error(...args: any[]): void {
console.error(`[${PLUGIN_NAME}] ERROR:`, ...args);
}
}

37
src/lib/encode.ts Normal file
View file

@ -0,0 +1,37 @@
export function base64EncodeImage(imageBuffer: ArrayBuffer): string {
let binary = '';
const bytes = new Uint8Array(imageBuffer);
const len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return btoa(binary);
}
export const base64ToExtension = (base64: string): string | null => {
// Match the MIME type from the base64 string
const match = base64.match(/^data:image\/([a-zA-Z0-9+]+);base64,/);
if (match) {
return match[1]; // Return the file extension (e.g., png, jpeg, webp)
}
// Fallback: Infer from content-based detection
const signatureToExtension: { [key: string]: string } = {
'/9j/': 'jpg', // JPEG
'iVBORw0KGgo': 'png', // PNG
'R0lGOD': 'gif', // GIF
'UklGR': 'webp', // WebP
'AAABAAE': 'ico', // ICO
'JVBER': 'pdf', // PDF (if applicable)
};
// Extract the first few characters of the base64 content
const signature = base64.substring(0, 10);
for (const [sig, ext] of Object.entries(signatureToExtension)) {
if (signature.startsWith(sig)) {
return ext;
}
}
return null; // Unknown format
}

61
src/lib/image-utils.ts Normal file
View file

@ -0,0 +1,61 @@
import VisionRecallPlugin from '@/main';
import { TFile } from 'obsidian';
export async function computeFileHash(plugin: VisionRecallPlugin, file: TFile): Promise<string> {
// Read the binary content of the file.
const arrayBuffer = await plugin.app.vault.readBinary(file);
// Compute a SHA-256 hash of the file's content.
const hashBuffer = await crypto.subtle.digest('SHA-256', arrayBuffer);
// Convert the hash to a hex string.
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
return hashHex;
}
/**
* Determines whether the image file should be processed.
*
* First, it checks if there's already a record for the file's path and if the
* file's metadata (size and last modified time) is unchanged. If so, it assumes
* the file has already been processed.
*
* If metadata differs or no record exists, it computes the file's hash and checks
* whether that hash has been seen before (even if the file was renamed or moved).
*
* @param file A TFile representing an image in your target directory.
* @returns A promise that resolves to true if the file should be processed,
* or false if it's already been handled.
*/
export async function shouldProcessImage(plugin: VisionRecallPlugin, file: TFile, onlyCheckHash: boolean = false): Promise<boolean> {
const stat = file.stat;
if (!onlyCheckHash) {
const existingRecord = (await plugin.dataManager.getProcessedFileRecords())[file.path];
// 1. Preliminary check: If we've seen this file path and its size & modified
// timestamp haven't changed, assume it's already been processed.
if (existingRecord && existingRecord.size === stat.size && existingRecord.mtime === stat.mtime) {
return false;
}
}
// 2. Since we either haven't seen this file or its metadata changed,
// compute the file's content hash.
const hash = await computeFileHash(plugin, file);
// 3. Check if the hash has already been processed.
const processedHashes = plugin.dataManager.getProcessedHashes();
plugin.logger.debug(`Checking if hash ${JSON.stringify(processedHashes, null, 2)} has already been processed.`);
if (processedHashes?.has(hash)) {
// Update (or add) the record for this file path with the current metadata.
plugin.dataManager.addProcessedFileRecord(file.path, { size: stat.size, mtime: stat.mtime, hash });
return false;
}
// 4. If the hash is new, mark the file as processed.
plugin.dataManager.addProcessedFileRecordAndHash(file.path, { size: stat.size, mtime: stat.mtime, hash }, hash);
return true;
}

43
src/lib/ingest.ts Normal file
View file

@ -0,0 +1,43 @@
import { TFile, normalizePath, FileSystemAdapter } from 'obsidian';
import { base64ToExtension } from './encode';
import VisionRecallPlugin from '@/main';
export async function saveBase64ImageInVault(plugin: VisionRecallPlugin, base64: string, folderPath: string, fileName?: string): Promise<TFile | null> {
try {
// Extract the file extension from the base64 string
// const match = base64.match(/^data:image\/([a-zA-Z0-9+]+);base64,/);
// const ext = match ? match[1] : 'png'; // Default to PNG if no MIME type is found
const ext = base64ToExtension(base64);
// Generate a filename if not provided
const name = fileName ?? `screenshot-${Date.now()}.${ext}`;
const filePath = normalizePath(`${folderPath}/${name}`);
// Remove the base64 header
const base64Data = base64.replace(/^data:image\/[a-zA-Z0-9+]+;base64,/, '');
const buffer = Buffer.from(base64Data, 'base64');
// Get the Obsidian filesystem
const adapter = plugin.app.vault.adapter;
if (!(adapter instanceof FileSystemAdapter)) {
plugin.logger.error("This Obsidian instance does not support file writing.");
return null;
}
// Ensure the folder exists
const folderExists = await adapter.exists(folderPath);
if (!folderExists) {
// await adapter.mkdir(folderPath);
return null;
}
// Write the file
await adapter.writeBinary(filePath, buffer);
// Return the saved file
return plugin.app.vault.getAbstractFileByPath(filePath) as TFile;
} catch (error) {
plugin.logger.error("Error saving base64 image in vault:", error);
return null;
}
}

36
src/lib/json-utils.ts Normal file
View file

@ -0,0 +1,36 @@
export function customStringify(
value: unknown,
formatted: boolean = false
): string {
return JSON.stringify(
value,
(_, val) => {
if (val instanceof Set) {
return { __type: 'Set', values: [...val] }
}
if (val instanceof Map) {
return { __type: 'Map', entries: [...val.entries()] }
}
return val
},
formatted ? 2 : 0 // Indent with 2 spaces if formatted is true
)
}
export function customParse(data: unknown): unknown {
if (typeof data === 'string') {
return JSON.parse(data, (_, val) => {
if (val && typeof val === 'object') {
if (val.__type === 'Set') {
return new Set(val.values);
}
if (val.__type === 'Map') {
return new Map(val.entries);
}
}
return val;
});
}
return data; // Return as-is if already an object
}

37
src/lib/ocr-validation.ts Normal file
View file

@ -0,0 +1,37 @@
import { franc } from 'franc';
export function isValidLanguage(text: string): boolean {
const detectedLanguage = franc(text); // Detect language
return detectedLanguage !== 'und'; // 'und' means undefined
}
export function isMostlyValidCharacters(text: string): boolean {
const validCharRegex = /^[\w\s.,!?'"-–—()]+$/u; // Adjust regex for more languages if needed
const validChars = text.split('').filter(char => validCharRegex.test(char)).length;
return validChars / text.length > 0.8; // At least 80% valid characters
}
export function isValidTextLength(text: string): boolean {
return text.length > 5 && text.length < 5000; // Arbitrary thresholds
}
export async function checkOCRText(text: string): Promise<string | null> {
// Combine validation checks
if (!isValidTextLength(text)) {
console.warn('Text length is invalid.');
return null;
}
if (!isMostlyValidCharacters(text)) {
console.warn('Text contains too many invalid characters.');
return null;
}
if (!isValidLanguage(text)) {
console.warn('Language detection failed.');
return null;
}
return text; // Process further if valid
}

40
src/lib/tag-utils.ts Normal file
View file

@ -0,0 +1,40 @@
import { z } from 'zod';
import { zodToJsonSchema } from 'zod-to-json-schema';
// Define the Zod schema
export const TagsSchema = z.object({
tags: z.array(z.string()), // Ensures an array of strings
});
// Convert Zod schema to JSON Schema
// export const tagsJsonSchema = TagsSchema.toJSON();
export const tagsJsonSchema = zodToJsonSchema(TagsSchema);
export function formatTags(tags: string[]): string[] {
return tags.map((tag) => {
let formattedTag = tag.replace(/ /g, '_');
return `#${formattedTag}`;
});
}
export function formatTagsWithoutPrefix(tags: string[]): string[] {
return tags.map((tag) => {
let formattedTag = tag.replace(/ /g, '_');
return formattedTag;
});
}
export function parseTags(tags: string[]): string[] {
return tags.map((tag) => {
let formattedTag = tag.replace(/_/g, ' ');
return formattedTag;
});
}
export function tagsToCommaString(tags: string[]): string {
return tags.join(', ');
}
export function tagsFromCommaString(tags: string): string[] {
return tags.split(',').map(tag => tag.trim());
}

6
src/lib/utils.ts Normal file
View file

@ -0,0 +1,6 @@
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

506
src/main.ts Normal file
View file

@ -0,0 +1,506 @@
import { normalizePath, Notice, Plugin, setIcon, setTooltip, TAbstractFile, TFile, WorkspaceLeaf } from 'obsidian';
import MainView, { MAIN_VIEW_TYPE } from '@/views/MainView';
import { PLUGIN_ICON, PLUGIN_NAME } from '@/constants';
import ScreenshotKBSettingTab from '@/settings/SettingsPage';
import { VisionRecallPluginSettings, DEFAULT_SETTINGS } from '@/types/settings-types';
import { ScreenshotProcessor } from '@/services/screenshot-processor';
import "@/styles/global.css";
import { DataManager, StoredData } from './data/DataManager';
import { PluginLogger } from '@/lib/Logger';
import { shouldProcessImage } from '@/lib/image-utils';
import { ProcessingQueue } from '@/services/ProcessingQueue';
import { ProcessingQueueModal } from '@/components/modals/ProcessingQueueModal';
import { saveBase64ImageInVault } from './lib/ingest';
import { useQueueStore } from '@/stores/queueStore';
import { customParse } from './lib/json-utils';
export default class VisionRecallPlugin extends Plugin {
settings: VisionRecallPluginSettings;
screenshotProcessor: ScreenshotProcessor;
dataManager: DataManager;
logger: PluginLogger;
processingQueue: ProcessingQueue;
metadata: any[] = []; // Plugin-level metadata state
statusBarEl: HTMLElement | null = null;
statusBarProcessingQueueEl: HTMLElement | null = null;
statusBarControlsEl: HTMLElement | null = null;
async onload() {
try {
// 1. Load core settings first
await this.loadSettings();
this.logger = new PluginLogger(this.settings);
// 2. Initialize data management
this.dataManager = new DataManager(this);
await this.dataManager.init();
// 3. Initialize processing components
this.screenshotProcessor = new ScreenshotProcessor(this.app, this.settings, this);
this.processingQueue = new ProcessingQueue(this, useQueueStore);
// 4. Initialize UI components
this.statusBarControlsEl = this.addStatusBarItem();
this.statusBarProcessingQueueEl = this.addStatusBarItem();
this.updateStatusBarControls();
if (this.settings.showStatusBarButton) {
this.updateProcessingQueueStatusBar();
}
// Subscribe to queue store changes
const unsubscribe = useQueueStore.subscribe(
(state) => {
this.updateStatusBarControls();
this.updateProcessingQueueStatusBar();
}
);
// Clean up subscription on plugin unload
this.register(() => unsubscribe());
// 5. Register views and commands
this.registerView(
MAIN_VIEW_TYPE,
(leaf: WorkspaceLeaf) => new MainView(leaf, this, this.dataManager)
);
this.addSettingTab(new ScreenshotKBSettingTab(this.app, this));
this.registerCommands();
this.registerProtocolHandler();
this.addRibbonIcon(PLUGIN_ICON, `Open ${PLUGIN_NAME}`, (evt: MouseEvent) => {
this.openView();
});
// 6. Register event listeners
this.registerEvent(
this.app.vault.on('create', (file) => this.onFileCreated(this, file))
);
// 7. Load metadata and start background processes
await this.loadScreenshotMetadata();
// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
this.registerInterval(
window.setInterval(() => this.logger.debug('Interval check'), 5 * 60 * 1000)
);
// Start polling after all initialization is complete
await this.dataManager.startIntakeDirectoryPolling();
// Listen for unprocessed images after polling is started
this.dataManager.on('unprocessed-images-found', async () => {
await this.screenshotProcessor.processIntakeFolderAuto();
});
this.logger.info('Plugin loaded successfully');
} catch (error) {
console.error('Failed to load plugin:', error);
new Notice('Failed to load Vision Recall plugin. Check console for details.');
}
}
private registerCommands() {
// Register all commands
this.addCommand({
id: 'open-main-view',
name: 'Open Main View',
callback: async () => this.activateView()
});
this.addCommand({
id: 'export-user-data',
name: 'Export User Data',
callback: async () => {
try {
const blob = await this.dataManager.exportUserData();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'obsidian_userdata.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
new Notice('User data exported successfully.');
} catch (error) {
console.error('Export failed:', error);
new Notice('Failed to export user data.');
}
}
});
this.addCommand({
id: 'import-user-data',
name: 'Import User Data',
callback: async () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'application/json';
input.addEventListener('change', async (event: Event) => {
const fileInput = event.target as HTMLInputElement;
if (!fileInput.files || fileInput.files.length === 0) return;
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = async (e) => {
if (!e.target?.result) return;
try {
await this.dataManager.importUserData(e.target.result as string);
new Notice('User data imported successfully.');
} catch (error) {
console.error('Import failed:', error);
new Notice('Failed to import user data. Invalid file format.');
}
};
reader.readAsText(file);
});
input.click();
}
});
}
openProcessingQueueModal() {
const modal = new ProcessingQueueModal({ app: this.app, plugin: this });
modal.open();
}
updateProcessingQueueStatusBar() {
this.statusBarProcessingQueueEl?.empty();
const queueIndicator = createEl('span', {
cls: 'queue-indicator',
});
const { isProcessing, isPaused } = useQueueStore.getState().status;
let icon = 'list';
if (isProcessing) {
icon = isPaused ? 'pause' : 'loader-2';
}
setIcon(queueIndicator, icon);
setTooltip(this.statusBarProcessingQueueEl, 'Processing Queue', { placement: 'top' });
queueIndicator.onclick = () => this.openProcessingQueueModal();
if (isProcessing && !isPaused) {
queueIndicator.addClass('rotating');
} else {
queueIndicator.removeClass('rotating');
}
this.statusBarProcessingQueueEl?.appendChild(queueIndicator);
}
removeStatusBarButton(): void {
if (this.statusBarControlsEl) {
this.statusBarControlsEl?.remove();
this.statusBarControlsEl = null;
}
if (this.statusBarProcessingQueueEl) {
this.statusBarProcessingQueueEl?.remove();
this.statusBarProcessingQueueEl = null;
}
}
updateStatusBarControls() {
if (!this.statusBarControlsEl) return;
if (!this.settings.showStatusBarButton) {
this.removeStatusBarButton();
return;
}
const { status } = useQueueStore.getState();
const hasPendingItems = status.queue.some(item => item.status === 'pending');
const shouldShowControls = status.isProcessing || status.isPaused || hasPendingItems || status.isStopped;
this.statusBarControlsEl.empty();
const controlsContainer = createEl('div', { cls: 'vision-recall-status-bar-controls' });
if (shouldShowControls) {
if (status.isProcessing) {
// Stop button
const stopButton = createEl('span', { cls: 'vision-recall-status-bar-control' });
setTooltip(stopButton, 'Stop processing', { placement: 'top' });
setIcon(stopButton, 'circle-stop');
stopButton.onclick = () => this.screenshotProcessor.setIsProcessingStopped(true);
// Pause button
const pauseButton = createEl('span', { cls: 'vision-recall-status-bar-control' });
setTooltip(pauseButton, 'Pause processing', { placement: 'top' });
setIcon(pauseButton, 'pause');
pauseButton.onclick = () => this.processingQueue.pauseProcessing();
controlsContainer.appendChild(stopButton);
controlsContainer.appendChild(pauseButton);
} else if (status.isPaused || status.isStopped) {
// Resume button
const resumeButton = createEl('span', { cls: 'vision-recall-status-bar-control' });
setTooltip(resumeButton, 'Resume processing', { placement: 'top' });
setIcon(resumeButton, 'play');
resumeButton.onclick = () => {
this.processingQueue.resumeProcessing();
this.processingQueue.processQueue();
};
controlsContainer.appendChild(resumeButton);
} else if (hasPendingItems) {
// Start button
const startButton = createEl('span', { cls: 'vision-recall-status-bar-control' });
setTooltip(startButton, 'Start processing', { placement: 'top' });
setIcon(startButton, 'play');
startButton.onclick = () => this.processingQueue.processQueue();
controlsContainer.appendChild(startButton);
}
}
this.statusBarControlsEl.appendChild(controlsContainer);
}
async autoProcessingEnabled(): Promise<boolean> {
const config = await this.dataManager.getConfig();
return config.enableAutoIntakeFolderProcessing || false;
}
async periodicProcessingEnabled(): Promise<boolean> {
const config = await this.dataManager.getConfig();
return config.enablePeriodicIntakeFolderProcessing || false;
}
async onFileCreated(plugin: VisionRecallPlugin, file: TAbstractFile) {
const autoProcessingEnabled = await plugin.autoProcessingEnabled();
if (!autoProcessingEnabled) return;
// Make sure we're dealing with a file, not a folder.
if (!(file instanceof TFile)) return;
const screenshotIntakeFolderPath = await this.getFolderFromSettingsKey('screenshotIntakeFolderPath');
if (!file.path.startsWith(screenshotIntakeFolderPath)) return;
// Check whether we should process this file.
if (await shouldProcessImage(this, file)) {
this.logger.info(`Processing new image: ${file.path}`);
// Add to processing queue instead of direct processing
this.processingQueue.addToQueue(file);
} else {
this.logger.info(`Skipping already processed image: ${file.path}`);
}
}
onunload() {
this.app.workspace.detachLeavesOfType(MAIN_VIEW_TYPE); // Detach view on plugin unload
if (this.screenshotProcessor) {
this.screenshotProcessor.terminateWorker(); // Terminate worker on plugin unload
}
this.removeStatusBarButton();
}
async setMetadata(newMetadata: any[]) {
this.metadata = newMetadata;
}
async openView() {
// Check if view is already open
const existingLeaves = this.app.workspace.getLeavesOfType(MAIN_VIEW_TYPE);
if (existingLeaves.length > 0) {
// Reveal and focus the first existing leaf
await this.app.workspace.revealLeaf(existingLeaves[0]);
return;
}
// If no existing leaf, create and activate a new one
await this.app.workspace.getLeaf(true).setViewState({
type: MAIN_VIEW_TYPE,
active: true,
});
}
async activateViewOfficial() {
const { workspace } = this.app;
let leaf: WorkspaceLeaf | null = null;
const leaves = workspace.getLeavesOfType(MAIN_VIEW_TYPE);
if (leaves.length > 0) {
// A leaf with our view already exists, use that
leaf = leaves[0];
} else {
// Our view could not be found in the workspace, create a new leaf
// in the right sidebar for it
leaf = workspace.getRightLeaf(false);
await leaf.setViewState({ type: MAIN_VIEW_TYPE, active: true });
}
// "Reveal" the leaf in case it is in a collapsed sidebar
workspace.revealLeaf(leaf);
}
// old function
async activateView() {
this.app.workspace.detachLeavesOfType(MAIN_VIEW_TYPE);
// Metadata is now loaded in the provider and updated reactively
await this.app.workspace.getLeaf(true).setViewState({
type: MAIN_VIEW_TYPE,
active: true,
// state: { metadata: this.metadata }, // No need to pass metadata as state anymore
});
this.app.workspace.revealLeaf(
this.app.workspace.getLeavesOfType(MAIN_VIEW_TYPE)[0]
);
}
toggleView() {
const leaves = this.app.workspace.getLeavesOfType(MAIN_VIEW_TYPE);
if (leaves.length > 0) {
this.deactivateView();
} else {
this.openView();
}
}
async deactivateView() {
this.app.workspace.detachLeavesOfType(MAIN_VIEW_TYPE);
}
async loadSettings() {
const existingData = (await this.loadData()) || {}; // Load existing data or default to empty object
const parsedExistingData = customParse(existingData) as StoredData;
// Start with default settings
this.settings = { ...DEFAULT_SETTINGS };
// Only override with existing settings that match our defaults structure
if (parsedExistingData && typeof parsedExistingData === 'object') {
for (const key of Object.keys(DEFAULT_SETTINGS)) {
if (key in parsedExistingData) {
this.settings[key] = parsedExistingData[key];
}
}
}
}
async saveMergedSettings() {
const existingData = await this.loadData() || {} // Load existing data or default to empty object
const updatedData = { ...existingData, ...this.dataManager.getAllData(), ...this.settings } // Merge settings
await this.saveData(updatedData) // Save merged data
}
async saveSettings() {
// await this.saveData(this.settings);
await this.saveMergedSettings();
}
async loadScreenshotMetadata(): Promise<void> {
this.metadata = await this.fetchScreenshotMetadata();
}
async loadScreenshotMetadataAndReturn(): Promise<any[]> {
const fetchedMetadata = await this.fetchScreenshotMetadata();
this.metadata = fetchedMetadata;
return fetchedMetadata;
}
async fetchScreenshotMetadata(): Promise<any[]> {
const metadataArray: any[] = [];
const screenshotStorageFolder = await this.getFolderWithPrefixIfEnabled(this.settings.screenshotStorageFolderPath);
// let availableTags: string[] = [];
let availableTags: Set<string> = new Set();
let tagCounts: Record<string, number> = {};
try {
const folder = this.app.vault.getFolderByPath(screenshotStorageFolder);
if (!folder) {
this.logger.warn(`Screenshot storage folder not found: ${screenshotStorageFolder}`);
return []; // Return empty array if folder not found
}
const children = folder.children;
// this.logger.info(children);
for (const child of children) {
if (child instanceof TFile && child.extension === 'json') {
try {
const metadataContent = await this.app.vault.read(child);
const metadata = JSON.parse(metadataContent);
metadataArray.push(metadata);
metadata?.extractedTags?.forEach(tag => {
availableTags.add(tag);
tagCounts[tag] = (tagCounts[tag] || 0) + 1;
});
} catch (jsonError) {
this.logger.error(`Error parsing metadata file: ${child.path}`, jsonError);
}
}
}
} catch (folderError) {
this.logger.error(`Error reading screenshot storage folder: ${screenshotStorageFolder}`, folderError);
}
// this.logger.info(metadataArray);
this.dataManager.setAvailableTags(availableTags);
this.dataManager.setTagCounts(tagCounts);
// this.logger.info(`Available tags: ${Array.from(availableTags)}`);
return metadataArray;
}
getSettingsKey = (key: string) => {
return Object.keys(this.settings).find(x => x == key);
}
getFolderFromSettingsKey = async (key: string) => {
return await this.getFolderWithPrefixIfEnabled(this.settings[this.getSettingsKey(key)]);
}
getFolderWithPrefixIfEnabled = async (folderPath: string, createIfNotExists: boolean = false) => {
let newFolderPath = folderPath;
if (this.settings.addPrefixToFolderNames) {
newFolderPath = `${this.settings.prefixToAddToFolderNames}${folderPath}`;
}
if (this.settings.useParentFolder) {
if (this.settings.parentFolderPath) {
if (!this.app.vault.getFolderByPath(this.settings.parentFolderPath)) {
if (createIfNotExists) {
await this.app.vault.createFolder(this.settings.parentFolderPath);
}
}
newFolderPath = normalizePath(`${this.settings.parentFolderPath}/${newFolderPath}`);
}
}
return newFolderPath;
}
private registerProtocolHandler(): void {
if (!this.settings.allowDeepLinkScreenshotIntake) return;
this.registerObsidianProtocolHandler('screenshot', async (e) => {
if (!this.settings.allowDeepLinkScreenshotIntake) return;
const screenshotStorageFolder = await this.getFolderFromSettingsKey('screenshotIntakeFolderPath');
if (!screenshotStorageFolder) return;
const file = await saveBase64ImageInVault(this, e.data, screenshotStorageFolder);
// const fileType = e.data.split(';')[0];
// this.logger.info(`File type: ${fileType}`);
// const fileExtension = base64ToExtension(e.data);
// this.logger.info(`File extension: ${fileExtension}`);
// const filePath = normalizePath(`${screenshotStorageFolder}/screenshot-${Date.now()}.${fileExtension}`);
// this.logger.info(`File path: ${filePath}`);
// const file = await this.app.vault.create(filePath, decodeBase64(e.data));
// await this.screenshotProcessor.processScreenshot(file);
});
}
}

147
src/services/ProcessingQueue.ts Normal file
View file

@ -0,0 +1,147 @@
import { Events, TFile } from 'obsidian';
import VisionRecallPlugin from '@/main';
import { useQueueStore } from '@/stores/queueStore';
export interface QueueItem {
file: TFile;
status: 'pending' | 'processing' | 'completed' | 'failed' | string;
error?: string;
}
export class ProcessingQueue extends Events {
private store: typeof useQueueStore;
plugin: VisionRecallPlugin;
constructor(
plugin: VisionRecallPlugin,
store: typeof useQueueStore
) {
super();
this.plugin = plugin;
this.store = store;
}
addToQueue(file: TFile) {
const { actions, status } = this.store.getState();
actions.addToQueue(file);
// Start processing if not already processing and not paused
if (!status.isProcessing && !status.isPaused) {
this.processQueue();
}
}
async processQueue() {
const { actions, status } = this.store.getState();
if (status.queue.length === 0 || status.isStopped) {
actions.updateStatus({ isProcessing: false });
return;
}
// If already processing or paused, don't start another processing cycle
if (status.isProcessing || status.isPaused) {
return;
}
actions.updateStatus({ isProcessing: true });
try {
for (const [index, item] of status.queue.entries()) {
// Check for stop or pause before starting a new item
const currentStatus = this.store.getState().status;
if (currentStatus.isStopped) break;
if (currentStatus.isPaused) {
actions.updateStatus({ isProcessing: false });
return;
}
// Skip non-pending items
if (item.status !== 'pending') continue;
actions.updateStatus({
currentFile: item.file,
progress: index + 1
});
actions.updateItemStatus(item.file.path, 'processing');
this.trigger('queueUpdated', status.queue);
try {
const success = await this.plugin.screenshotProcessor.processScreenshot(item.file, true);
actions.updateItemStatus(item.file.path, success ? 'completed' : 'failed');
if (success) {
await this.plugin.app.vault.delete(item.file);
}
} catch (error) {
actions.updateItemStatus(item.file.path, 'failed', error.message);
this.plugin.logger.error(`Failed to process ${item.file.path}: ${error.message}`);
}
this.trigger('queueUpdated', this.store.getState().status.queue);
await new Promise(resolve => setTimeout(resolve, 500));
// Check if we should pause after completing this item
if (this.store.getState().status.isPaused) {
actions.updateStatus({ isProcessing: false });
return;
}
}
} finally {
const currentStatus = this.store.getState().status;
if (!currentStatus.isStopped && !currentStatus.isPaused) {
actions.updateStatus({
isProcessing: false,
currentFile: undefined
});
// Check for any remaining pending items and process them
if (currentStatus.queue.some(item => item.status === 'pending')) {
await this.processQueue();
}
}
}
}
addMultipleToQueue(files: TFile[]) {
const { actions, status } = this.store.getState();
actions.addMultipleToQueue(files);
this.trigger('queueUpdated', status.queue);
if (!status.isProcessing && !status.isPaused) {
this.processQueue();
}
}
clearQueue() {
this.store.getState().actions.clearQueue();
}
stopProcessing() {
this.store.getState().actions.stopProcessing();
}
pauseProcessing() {
this.store.getState().actions.pauseProcessing();
}
resumeProcessing() {
const { actions, status } = this.store.getState();
actions.resumeProcessing();
if (status.queue.some(item => item.status === 'pending')) {
this.processQueue();
}
}
unpauseProcessing() {
const { actions, status } = this.store.getState();
actions.unpauseProcessing();
if (status.queue.some(item => item.status === 'pending')) {
this.processQueue();
}
}
}

286
src/services/llm-service.ts Normal file
View file

@ -0,0 +1,286 @@
import { OPENROUTER_HEADERS } from '@/constants';
import { tagsJsonSchema } from '@/lib/tag-utils';
import { VisionRecallPluginSettings } from '@/types/settings-types';
export const VISION_LLM_PROMPT = "Analyze this screenshot and describe its content and identify the type of screenshot if possible.";
export function adjustEndpoint(apiEndpointUrl: string, shouldRemove: boolean): string {
const suffix = '/v1'
if (shouldRemove) {
return apiEndpointUrl.endsWith(suffix)
? apiEndpointUrl.slice(0, -suffix.length)
: apiEndpointUrl
} else {
return apiEndpointUrl.endsWith(suffix)
? apiEndpointUrl
: apiEndpointUrl + suffix
}
}
export async function callLLMAPI(
settings: VisionRecallPluginSettings,
apiEndpoint: string,
payload: any
): Promise<string | null> {
const headers: HeadersInit = {
'Content-Type': 'application/json',
};
if (settings.llmProvider === 'openai' && settings.apiKey) {
headers['Authorization'] = `Bearer ${settings.apiKey}`;
}
const baseUrl = settings.apiBaseUrl || (settings.llmProvider === 'ollama' ? 'http://localhost:11434/v1' : 'https://api.openai.com/v1');
// Add OpenRouter specific headers if the baseUrl contains "openrouter"
if (baseUrl.toLowerCase().includes('openrouter')) {
headers['HTTP-Referer'] = OPENROUTER_HEADERS['HTTP-Referer'];
headers['X-Title'] = OPENROUTER_HEADERS['X-Title'];
}
try {
const response = await fetch(`${baseUrl}${apiEndpoint}`, {
method: 'POST',
headers: headers,
body: JSON.stringify(payload),
});
if (!response.ok) {
console.error(`LLM API Error: ${response.status} ${response.statusText}`);
return null;
}
const data = await response.json();
if (settings.llmProvider === 'openai' || settings.llmProvider === 'ollama') {
return data?.choices?.[0]?.message?.content || null;
}
return null;
} catch (error) {
console.error('LLM API Call Failed:', error);
return null;
}
}
function sanitizeTags(rawTags: any): string[] {
// If input is a string, try to parse it if it looks like JSON
if (typeof rawTags === 'string') {
// Remove any leading/trailing whitespace and common wrapper characters
const trimmed = rawTags.trim().replace(/^[\[\({]|[\]\)}]$/g, '');
try {
// Attempt to parse if it looks like JSON
if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
rawTags = JSON.parse(trimmed);
} else {
// Split by common delimiters if it's a plain string
rawTags = trimmed.split(/[,;\n]/).map(tag => tag.trim());
}
} catch {
// If parsing fails, split by common delimiters
rawTags = trimmed.split(/[,;\n]/).map(tag => tag.trim());
}
}
// Ensure we're working with an array
if (!Array.isArray(rawTags)) {
rawTags = [String(rawTags)];
}
return rawTags
.map(tag => {
if (typeof tag !== 'string') return String(tag);
return tag
// Remove unwanted characters
.replace(/[\[\]*/\\`'")(}{\n]/g, '')
// Remove extra spaces
.trim()
// Convert multiple spaces to single space
.replace(/\s+/g, ' ');
})
// Filter out empty tags
.filter(tag => tag && tag.length > 0)
// Take only first 5 tags
.slice(0, 5);
}
export async function llmSuggestTags(settings: VisionRecallPluginSettings, notesText: string | null): Promise<string[]> {
if (!notesText) {
return [];
}
try {
const tagPrompt = `Please suggest exactly 5 relevant tags or keywords to categorize the following notes. Return ONLY a JSON array of 5 strings, nothing else. Example format: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5']\n\nNotes:\n${notesText}`;
const tagPayload = {
model: settings.endpointLlmModelName,
messages: [
{ role: "user", content: tagPrompt }
],
max_tokens: 100,
response_format: {
type: 'json_schema',
json_schema: {
name: 'tags',
...tagsJsonSchema
},
strict: true,
}
};
const llmResponseText = await callLLMAPI(
settings,
'/chat/completions',
tagPayload
);
if (!llmResponseText) {
return [];
}
// Could try zod parse here
return sanitizeTags(llmResponseText);
} catch (error) {
console.error('LLM Tag Suggestion Error:', error);
return [];
}
}
export async function fetchLLMAPIGet(
settings: VisionRecallPluginSettings,
apiEndpoint: string,
removeSuffix: boolean = false
): Promise<string | null> {
const headers: HeadersInit = {
'Content-Type': 'application/json',
};
if (settings.llmProvider === 'openai' && settings.apiKey) {
headers['Authorization'] = `Bearer ${settings.apiKey}`;
}
let baseUrl = settings.apiBaseUrl || (settings.llmProvider === 'ollama' ? 'http://localhost:11434/v1' : 'https://api.openai.com/v1');
if (removeSuffix) {
baseUrl = adjustEndpoint(baseUrl, true)
}
try {
const response = await fetch(`${baseUrl}${apiEndpoint}`, {
method: 'GET',
headers: headers,
});
if (!response.ok) {
console.error(`LLM API Error: ${response.status} ${response.statusText}`);
return null;
}
const data = await response.json();
return data;
} catch (error) {
console.error('LLM API Call Failed:', error);
return null;
}
}
type OllamaModelDetails = {
parent_model: string;
format: string;
family: string;
families: string[];
parameter_size: string;
quantization_level: string;
};
type OllamaModel = {
name: string;
model: string;
modified_at: string;
size: number;
digest: string;
details: OllamaModelDetails;
};
type OllamaApiResponse = {
models: OllamaModel[];
};
/**
* Fetches models from the Ollama API.
* @param endpointUrl - The base URL of the Ollama API (without `/api/tags`).
* @returns A promise resolving to an array of Ollama models.
*/
async function fetchOllamaModels(endpointUrl: string): Promise<OllamaModel[]> {
try {
let endpoint = adjustEndpoint(endpointUrl, true)
const response = await fetch(`${endpoint}/api/tags`);
if (!response.ok) {
throw new Error(`Failed to fetch models: ${response.status} ${response.statusText}`);
}
const data: OllamaApiResponse = await response.json();
return data.models;
} catch (error) {
console.error("Error fetching Ollama models:", error);
return [];
}
}
type OpenAIModel = {
id: string;
object: string;
created: number;
owned_by: string;
};
type OpenAIModelsResponse = {
object: string;
data: OpenAIModel[];
};
/**
* Fetches models from an OpenAI-compatible API.
* @param endpointUrl - The base URL of the OpenAI API (without `/v1/models`).
* @returns A promise resolving to an array of OpenAI models.
*/
async function fetchOpenAIModels(endpointUrl: string, apiKey: string): Promise<OpenAIModel[]> {
try {
const response = await fetch(`${endpointUrl}/v1/models`, {
headers: {
'Authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error(`Failed to fetch models: ${response.status} ${response.statusText}`);
}
const data: OpenAIModelsResponse = await response.json();
return data.data;
} catch (error) {
console.error("Error fetching OpenAI models:", error);
return [];
}
}
export async function getModels(settings: VisionRecallPluginSettings): Promise<string[]> {
if (!settings.apiBaseUrl) {
return [];
}
let models: string[] = [];
if (settings.llmProvider === 'openai') {
models = (await fetchOpenAIModels(settings.apiBaseUrl, settings.apiKey)).map(model => model.id);
} else if (settings.llmProvider === 'ollama') {
models = (await fetchOllamaModels(settings.apiBaseUrl)).map(model => model.name);
}
return models;
}

205
src/services/note-link-service.ts Normal file
View file

@ -0,0 +1,205 @@
import VisionRecallPlugin from '@/main';
import { Notice, Plugin, TFile } from 'obsidian';
// Generated by ChatGPT and not part of the rest of the functions below
export const findNotesWithTag = (plugin: VisionRecallPlugin, tag: string): string[] => {
const filesWithTag: string[] = [];
const cachedFiles = Object.keys(plugin.app.metadataCache.getCache('files') || {});
cachedFiles.forEach((filePath) => {
const metadata = plugin.app.metadataCache.getCache(filePath);
if (metadata && metadata.tags) {
const tags = metadata.tags.map(tagObj => tagObj.tag);
if (tags.includes(tag)) {
filesWithTag.push(filePath);
}
}
});
return filesWithTag;
}
export const findFirstNoteWithTag = async (plugin: Plugin, tag: string): Promise<string | null> => {
const cachedFiles = Object.keys(plugin.app.metadataCache.getCache('files') || {});
cachedFiles.forEach((filePath) => {
const metadata = plugin.app.metadataCache.getCache(filePath);
if (metadata && metadata.tags) {
const tags = metadata.tags.map(tagObj => tagObj.tag);
if (tags.includes(tag)) {
return filePath;
}
}
});
return null;
}
export const findNotesWithTagInline = async (plugin: VisionRecallPlugin, tag: string): Promise<string[]> => {
const matchingFiles: string[] = [];
for (const file of plugin.app.vault.getMarkdownFiles()) {
const content = await plugin.app.vault.read(file);
if (content.includes(tag)) {
matchingFiles.push(file.path);
}
}
return matchingFiles;
}
export const openNoteWithTagOld = async (plugin: VisionRecallPlugin, tag: string): Promise<void> => {
const file = await findFirstNoteWithTag(plugin, tag);
if (file) {
await plugin.app.workspace.openLinkText(file, '', false, { active: true });
} else {
plugin.logger.info(`No notes found with tag ${tag}`);
}
// const files = findNotesWithTag(plugin, tag);
// if (files.length > 0) {
// const file = plugin.app.vault.getAbstractFileByPath(files[0]);
// if (file instanceof TFile) {
// // plugin.app.workspace.getMostRecentLeaf().openFile(file); // might want to open in a new tab instead
// await plugin.app.workspace.openLinkText(file.path, '', false, { active: true });
// }
// } else {
// console.log(`No notes found with tag ${tag}`);
// }
}
// --- Helper Functions for Note Linking by Full Unique Tag (Using metadataCache) ---
export async function getNoteByUniqueTagOrCreateTag(plugin: VisionRecallPlugin, noteName: string, parentTagPrefix: string): Promise<TFile | null> {
const { vault, metadataCache, workspace } = plugin.app;
let targetFile = vault.getAbstractFileByPath(`${noteName}.md`) as TFile;
if (!targetFile) {
// If not found by name, try to find by unique nested tag using metadataCache
// We need to generate the unique tag first to search for it
const uniqueId = generateUniqueId();
const fullUniqueTag = `#${parentTagPrefix}/${uniqueId}`;
targetFile = await findNoteByUniqueTag(plugin, fullUniqueTag); // Pass the full unique tag
if (targetFile) {
return targetFile;
} else {
return null;
}
}
// File found by name (or was just created if you have note creation logic elsewhere)
const uniqueTag = await ensureUniqueTagExists(plugin, targetFile, parentTagPrefix);
if (!uniqueTag) {
plugin.logger.error("Failed to ensure unique tag exists for file:", targetFile.path);
return null;
}
return targetFile;
}
export async function findNoteByUniqueTag(plugin: VisionRecallPlugin, fullUniqueTag: string): Promise<TFile | null> { // Now accepts fullUniqueTag
const { vault, metadataCache } = plugin.app;
const allFiles = vault.getMarkdownFiles();
for (const file of allFiles) {
const metadata = metadataCache.getFileCache(file); // Get cached metadata for the file
if (metadata && metadata.tags) { // Check if metadata and tags exist
const tags = metadata.tags;
for (const tagCache of tags) { // Iterate through the tags in the cache
if (tagCache.tag === fullUniqueTag) { // Check for exact match with fullUniqueTag
return file; // Found a file with the exact unique tag
}
}
}
}
return null; // No note found with the exact unique tag
}
export async function ensureUniqueTagExists(plugin: VisionRecallPlugin, file: TFile, parentTagPrefix: string): Promise<string | null> {
const { vault } = plugin.app;
let fileContent = await vault.read(file);
const existingTag = await findUniqueTagInContent(fileContent, parentTagPrefix);
if (existingTag) {
return existingTag;
} else {
// Generate a new unique tag - now with nested structure #parent/child
const newUniqueId = generateUniqueId();
const newUniqueTag = `#${parentTagPrefix}/${newUniqueId}`; // Construct nested tag
// Append the new tag to the end of the file content
const updatedContent = fileContent.trimEnd() + `\n\n${newUniqueTag}`;
await vault.modify(file, updatedContent);
return newUniqueTag;
}
}
export async function findUniqueTagInContent(content: string, parentTagPrefix: string): Promise<string | null> {
const tagRegex = new RegExp(`#${parentTagPrefix}/([a-zA-Z0-9-]+)`, 'g');
const matches = content.matchAll(tagRegex);
for (const match of matches) {
if (match && match[0]) {
return match[0];
}
}
return null;
}
export function generateUniqueId(): string {
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}
export const searchForFirstNoteWithContent = async (plugin: VisionRecallPlugin, tag: string): Promise<string | null> => {
const files = plugin.app.vault.getMarkdownFiles();
for (const file of files) {
const content = await plugin.app.vault.cachedRead(file);
if (content.includes(tag)) {
return file.path;
}
}
return null;
}
export const openNoteWithContent = async (plugin: VisionRecallPlugin, content: string): Promise<void> => {
plugin.logger.info(`openNoteWithContent: content: ${content}`);
const file = await searchForFirstNoteWithContent(plugin, content);
if (file) {
await plugin.app.workspace.openLinkText(file, '', false, { active: true });
} else {
plugin.logger.info(`No notes found with content ${content}`);
}
}
export const openNoteWithTag = async (plugin: VisionRecallPlugin, tag: string): Promise<void> => {
plugin.logger.info(`openNoteWithTag: tag: ${tag}`);
// const searchContent = `#${plugin.settings.tagPrefix}/${tag}`;
let searchContent = tag;
if (!tag.includes('#')) {
searchContent = `#${plugin.settings.tagPrefix}/${tag}`;
}
const file = await searchForFirstNoteWithContent(plugin, searchContent);
if (file) {
await plugin.app.workspace.openLinkText(file, '', false, { active: true });
} else {
plugin.logger.info(`No notes found with tag ${tag}`);
new Notice(`Could not find note with identifying tag: ${searchContent}`);
}
}
export const findNoteByTag = async (plugin: VisionRecallPlugin, tag: string): Promise<TFile | null> => {
plugin.logger.info(`findNoteByTag: tag: ${tag}`);
// const searchContent = `#${plugin.settings.tagPrefix}/${tag}`;
let searchContent = tag;
if (!tag.includes('#')) {
searchContent = `#${plugin.settings.tagPrefix}/${tag}`;
}
const file = await searchForFirstNoteWithContent(plugin, searchContent);
if (file) {
return plugin.app.vault.getAbstractFileByPath(file) as TFile;
}
return null;
}

785
src/services/screenshot-processor.ts Normal file
View file

@ -0,0 +1,785 @@
import { App, Notice, TFile, TFolder, normalizePath } from 'obsidian';
import Tesseract, { createWorker, Worker } from 'tesseract.js';
import { VisionRecallPluginSettings } from '@/types/settings-types';
import { VISION_LLM_PROMPT, callLLMAPI, llmSuggestTags } from '@/services/llm-service';
import VisionRecallPlugin from '@/main';
import { checkOCRText } from '@/lib/ocr-validation';
import { formatTags, tagsToCommaString } from '@/lib/tag-utils';
import { useQueueStore } from '@/stores/queueStore';
import { PluginLogger } from '@/lib/Logger';
import { base64EncodeImage } from '@/lib/encode';
import { visionLLMResponseCategoriesMap } from '@/data/reference';
import { shouldProcessImage } from '@/lib/image-utils';
export type DeleteScreenshotMetadataParams = {
identity: string;
identityType: 'id' | 'timestamp';
}
class ProgressManager {
private notice: Notice | null = null;
private progress: number = 0;
constructor(private plugin: VisionRecallPlugin) { }
setIsProcessingStopped(stopped: boolean) {
if (stopped) {
useQueueStore.getState().actions.stopProcessing();
} else {
useQueueStore.getState().actions.resumeProcessing();
}
}
updateProgress(message: string, increment: number) {
const { status, actions } = useQueueStore.getState();
if (status.isStopped) return;
this.progress = Math.min(this.progress + increment, 100);
actions.updateStatus({
isProcessing: true,
message,
progress: this.progress,
minimized: this.plugin.dataManager.getMinimizedProgressDisplay()
});
if (this.notice) {
this.notice.setMessage(message);
}
}
startProgress(initialMessage: string) {
this.progress = 0;
useQueueStore.getState().actions.resumeProcessing();
this.notice = new Notice(initialMessage, 0);
}
endProgress(success: boolean = true) {
if (this.notice) {
this.notice.hide();
}
const { status, actions } = useQueueStore.getState();
if (!status.isStopped) {
actions.updateStatus({
isProcessing: false,
message: '',
progress: 0
});
}
this.notice = null;
}
isStoppedByUser(): boolean {
return useQueueStore.getState().status.isStopped;
}
}
export class ScreenshotProcessor {
app: App;
plugin: VisionRecallPlugin;
private worker: Worker | null = null;
private progressManager: ProgressManager;
private logger: PluginLogger;
constructor(
app: App,
private settings: VisionRecallPluginSettings,
plugin: VisionRecallPlugin
) {
this.app = app;
this.plugin = plugin;
this.logger = plugin.logger;
this.progressManager = new ProgressManager(plugin);
// this.initializeWorker();
}
setIsProcessingStopped(stopped: boolean) {
this.progressManager.setIsProcessingStopped(stopped);
}
async initializeWorker() {
try {
this.worker = await createWorker();
this.logger.debug('Tesseract worker initialized.');
} catch (error) {
this.logger.error('Error initializing Tesseract worker:', error);
new Notice('Failed to initialize OCR worker. See console for details.');
this.worker = null;
}
}
async terminateWorker() {
if (this.worker) {
await this.worker.terminate();
this.worker = null;
this.logger.debug('Tesseract worker terminated.');
}
}
private async initializeProcessing(imageFile: TFile): Promise<boolean> {
if (this.worker === null) {
new Notice('Initializing Tesseract worker...');
await this.initializeWorker();
}
// Remove redundant processing check since queue system handles this
return true;
}
private async checkDuplicateFile(imageFile: TFile): Promise<boolean> {
if (!this.plugin.settings.disableDuplicateFileCheck) {
try {
if (!(await shouldProcessImage(this.plugin, imageFile, true))) {
this.logger.debug(`Skipping screenshot: ${imageFile.path} — Duplicate or already processed.`);
return false;
}
} catch (error) {
this.logger.error('Error checking if image should be processed:', error);
return false;
}
}
return true;
}
private async processImageContent(imageFile: TFile): Promise<{
ocrText: string;
visionLLMResponse: string;
generatedNotes: string;
extractedTags: string[];
formattedTags: string;
} | null> {
this.progressManager.updateProgress('Performing OCR...', 10);
if (this.progressManager.isStoppedByUser()) return null;
const ocrText = await this.performOCR(imageFile);
if (!ocrText || this.progressManager.isStoppedByUser()) return null;
let validOCRText = await checkOCRText(ocrText);
if (!validOCRText) validOCRText = '';
if (this.progressManager.isStoppedByUser()) return null;
this.progressManager.updateProgress('Analyzing image...', 30);
if (this.progressManager.isStoppedByUser()) return null;
const visionLLMResponse = await this.performVisionAnalysis(imageFile, validOCRText);
if (!visionLLMResponse || this.progressManager.isStoppedByUser()) return null;
this.progressManager.updateProgress('Generating notes...', 20);
if (this.progressManager.isStoppedByUser()) return null;
const generatedNotes = await this.generateNotes(validOCRText, visionLLMResponse);
if (!generatedNotes || this.progressManager.isStoppedByUser()) return null;
this.progressManager.updateProgress('Generating tags...', 20);
if (this.progressManager.isStoppedByUser()) return null;
const extractedTags = await this.generateTags(generatedNotes);
if (this.progressManager.isStoppedByUser()) return null;
const formattedTags = tagsToCommaString(formatTags(extractedTags));
this.logger.debug('Formatted Tags:', formattedTags);
return {
ocrText: validOCRText,
visionLLMResponse,
generatedNotes,
extractedTags,
formattedTags
};
}
private async prepareFilePaths(imageFile: TFile, skipUniqueName: boolean): Promise<{
screenshotStorageFolder: string;
uniqueName: string;
uniqueScreenshotFilename: string;
newScreenshotPath: string;
}> {
const screenshotStorageFolder = normalizePath(await this.plugin.getFolderFromSettingsKey('screenshotStorageFolderPath'));
if (!await this.app.vault.adapter.exists(screenshotStorageFolder)) {
await this.app.vault.adapter.mkdir(screenshotStorageFolder);
}
const timestamp = Date.now();
let uniqueName = skipUniqueName ? imageFile.basename : `${imageFile.basename}-${timestamp}`;
uniqueName = uniqueName.replace(/ /g, '_');
const uniqueScreenshotFilename = `${uniqueName}.${imageFile.extension}`;
const newScreenshotPath = normalizePath(`${screenshotStorageFolder}/${uniqueScreenshotFilename}`);
return {
screenshotStorageFolder,
uniqueName,
uniqueScreenshotFilename,
newScreenshotPath
};
}
async processScreenshot(imageFile: TFile, returnSuccess: boolean = false, skipUniqueName: boolean = false): Promise<boolean | void> {
if (!await this.initializeProcessing(imageFile)) {
return false;
}
this.progressManager.startProgress("Processing screenshot...");
try {
if (!await this.checkDuplicateFile(imageFile)) {
this.progressManager.endProgress();
this.plugin.dataManager.setCurrentlyProcessing(false);
return false;
}
const entryId = crypto.randomUUID();
const processedContent = await this.processImageContent(imageFile);
if (!processedContent) {
return false;
}
const {
ocrText,
visionLLMResponse,
generatedNotes,
extractedTags,
formattedTags
} = processedContent;
const paths = await this.prepareFilePaths(imageFile, skipUniqueName);
if (this.progressManager.isStoppedByUser()) return false;
this.progressManager.updateProgress('Saving results...', 20);
if (this.progressManager.isStoppedByUser()) return false;
const noteInfo = await this.createObsidianNote(
imageFile,
paths.newScreenshotPath,
ocrText,
visionLLMResponse,
generatedNotes,
extractedTags,
formattedTags,
entryId,
paths.uniqueName
);
if (!noteInfo || this.progressManager.isStoppedByUser()) return false;
await this.saveScreenshotAndMetadata(
imageFile,
paths.newScreenshotPath,
paths.uniqueName,
paths.uniqueScreenshotFilename,
ocrText,
visionLLMResponse,
generatedNotes,
extractedTags,
formattedTags,
noteInfo,
entryId
);
if (this.progressManager.isStoppedByUser()) return false;
this.logger.debug('Screenshot processing completed.');
this.progressManager.endProgress(true);
// Update metadata
await this.plugin.loadScreenshotMetadata();
this.plugin.dataManager.setCurrentlyProcessing(false);
return returnSuccess ? true : undefined;
} catch (error) {
this.logger.error('Error processing screenshot:', error);
new Notice('Error processing screenshot. Please check console.');
this.progressManager.endProgress(false);
return returnSuccess ? false : undefined;
} finally {
this.plugin.dataManager.setCurrentlyProcessing(false);
}
}
private async performOCR(imageFile: TFile): Promise<string | null> {
if (!this.worker) {
this.logger.warn('Tesseract worker not initialized. OCR will not be performed.');
new Notice('OCR worker is not ready.');
return null;
}
try {
const imageBuffer = await this.app.vault.readBinary(imageFile);
if (this.progressManager.isStoppedByUser()) return null;
const result = await this.worker.recognize(
imageBuffer as Tesseract.ImageLike
);
const ocrText = result.data.text;
this.logger.debug('OCR Text:', ocrText ? ocrText.substring(0, 100) + '...' : 'No text extracted');
return ocrText;
} catch (error) {
this.logger.error('OCR Error:', error);
new Notice('OCR processing failed. See console for details.');
return null;
}
}
private async performVisionAnalysis(imageFile: TFile, ocrText: string): Promise<string | null> {
try {
const imageBuffer = await this.app.vault.readBinary(imageFile);
const base64Image = base64EncodeImage(imageBuffer);
const visionPayload = {
model: this.settings.visionModelName,
messages: [
{
role: "user",
content: [
{ type: "text", text: VISION_LLM_PROMPT },
{ type: "image_url", image_url: { url: `data:image/png;base64,${base64Image}`, detail: "high" } },
],
}
],
max_tokens: 300,
};
if (this.progressManager.isStoppedByUser()) return null;
const visionLLMResponse = await callLLMAPI(
this.settings,
'/chat/completions',
visionPayload
);
this.logger.debug('Vision LLM Response:', visionLLMResponse ? visionLLMResponse.substring(0, 200) + '...' : 'API call failed or no response');
return visionLLMResponse;
} catch (error) {
this.logger.error('Vision LLM API Error:', error);
new Notice('Vision LLM API call failed. See console for details.');
return null;
}
}
private async generateNotes(ocrText: string, visionLLMResponse: string): Promise<string | null> {
try {
let endpointPrompt = `The following text is from a screenshot. Summarize the text and identify key information.`;
const visionLLMCategories = Object.keys(visionLLMResponseCategoriesMap);
const visionLLMCategory = visionLLMCategories.find(category => visionLLMResponse.toLowerCase().includes(category));
if (visionLLMCategory) {
endpointPrompt = visionLLMResponseCategoriesMap[visionLLMCategory];
}
endpointPrompt += `\n\nOCR Text:\n${ocrText}\n\nVision Analysis:\n${visionLLMResponse}`
const endpointPayload = {
model: this.settings.endpointLlmModelName,
messages: [
{ role: "user", content: endpointPrompt }
],
max_tokens: this.settings.maxTokens,
};
if (this.progressManager.isStoppedByUser()) return null;
const generatedNotes = await callLLMAPI(
this.settings,
'/chat/completions',
endpointPayload
);
this.logger.debug('Generated Notes:', generatedNotes ? generatedNotes.substring(0, 300) + '...' : 'API call failed or no notes generated');
return generatedNotes;
} catch (error) {
this.logger.error('Endpoint LLM API Error:', error);
new Notice('Endpoint LLM API call failed. See console for details.');
return null;
}
}
private async generateTags(generatedNotes: string): Promise<string[]> {
try {
if (this.progressManager.isStoppedByUser()) return [];
const extractedTags = await llmSuggestTags(this.settings, generatedNotes);
this.logger.debug('LLM Suggested Tags:', extractedTags);
return extractedTags;
} catch (error) {
this.logger.error('Tag Generation Error:', error);
new Notice('Tag generation failed. See console for details.');
return [];
}
}
private async createObsidianNote(
imageFile: TFile,
newScreenshotPath: string,
ocrText: string,
visionLLMResponse: string,
generatedNotes: string,
extractedTags: string[],
formattedTags: string,
id: string,
uniqueName: string
): Promise<{ notePath: string; noteTitle: string } | null> {
try {
const outputNotesFolder = normalizePath(await this.plugin.getFolderFromSettingsKey('outputNotesFolderPath'));
const noteTitleBase = imageFile.basename;
let noteTitle = `${noteTitleBase}-notes.md`;
let notePath = normalizePath(`${outputNotesFolder}/${noteTitle}`);
let counter = 1;
while (this.app.vault.getAbstractFileByPath(notePath) && counter < 100) {
noteTitle = `${noteTitleBase}-notes (${counter}).md`;
notePath = normalizePath(`${outputNotesFolder}/${noteTitle}`);
counter++;
}
if (counter >= 100) {
new Notice('Failed to create note. Too many notes with the same name.');
return null;
}
// Truncate text if needed
const truncatedOcrText = this.settings.truncateOcrText > 0
? ocrText.substring(0, this.settings.truncateOcrText)
: ocrText;
const truncatedVisionLLMResponse = this.settings.truncateVisionLLMResponse > 0
? visionLLMResponse.substring(0, this.settings.truncateVisionLLMResponse)
: visionLLMResponse;
const ocrTitle = this.settings.truncateOcrText > 0
? `OCR Text (truncated to ${this.settings.truncateOcrText} characters)`
: 'OCR Text';
const visionTitle = this.settings.truncateVisionLLMResponse > 0
? `Vision LLM Context (truncated to ${this.settings.truncateVisionLLMResponse} characters)`
: 'Vision LLM Context';
// Main note content
const noteContent = `# Notes from Screenshot: ${noteTitleBase}\n\n${generatedNotes}`;
const linkingTag = `#${this.settings.tagPrefix}/${uniqueName}`;
const metadataContent = `\n\n---\n*Screenshot Filename:* [[${newScreenshotPath}]]\n*${ocrTitle}*:\n\`\`\`\n${truncatedOcrText}...\n\`\`\`\n*${visionTitle}*:\n\`\`\`\n${truncatedVisionLLMResponse}...\n\`\`\`\n\n*Tags:* ${formattedTags}\n\n${linkingTag}\n`;
const finalNoteContent = this.settings.includeMetadataInNote
? `${noteContent}\n\n${metadataContent}`
: noteContent;
if (this.progressManager.isStoppedByUser()) return null;
// Write note file
await this.app.vault.create(notePath, finalNoteContent);
this.logger.debug(`Obsidian note created: ${notePath}`);
new Notice(`Note created: ${noteTitle}`);
return { notePath, noteTitle };
} catch (error) {
this.logger.error('Error creating Obsidian note:', error);
new Notice('Error creating Obsidian note. See console for details.');
return null;
}
}
private async saveScreenshotAndMetadata(
imageFile: TFile,
newScreenshotPath: string,
uniqueName: string,
uniqueScreenshotFilename: string,
ocrText: string,
visionLLMResponse: string,
generatedNotes: string,
extractedTags: string[],
formattedTags: string,
noteInfo: { notePath: string; noteTitle: string },
entryId: string
): Promise<void> {
try {
await this.app.vault.copy(imageFile, newScreenshotPath);
this.logger.debug(`Screenshot saved to: ${newScreenshotPath}`);
const metadataFilename = `${uniqueName}.json`;
const metadataPath = normalizePath(`${await this.plugin.getFolderFromSettingsKey('screenshotStorageFolderPath')}/${metadataFilename}`);
const linkingTag = `#${this.settings.tagPrefix}/${uniqueName}`;
const metadata = {
id: entryId,
originalFilename: imageFile.name,
screenshotFilename: uniqueScreenshotFilename,
screenshotStoragePath: newScreenshotPath,
notePath: noteInfo.notePath,
noteTitle: noteInfo.noteTitle,
ocrText,
visionLLMResponse,
generatedNotes,
extractedTags: extractedTags,
formattedTags: formattedTags,
timestamp: new Date().toISOString(),
metadataFilename: metadataFilename,
metadataPath: metadataPath,
uniqueName: uniqueName,
uniqueTag: linkingTag
};
const dataStoreEntry = {
...metadata,
}
delete dataStoreEntry.generatedNotes;
if (this.progressManager.isStoppedByUser()) return;
await this.app.vault.create(metadataPath, JSON.stringify(metadata, null, 2));
this.logger.debug(`Metadata saved to: ${metadataPath}`);
// Update the metadata in the DataManager
await this.plugin.dataManager.addOrUpdateEntry(dataStoreEntry);
} catch (error) {
this.logger.error('Error saving screenshot or metadata:', error);
new Notice('Error saving screenshot or metadata. See console for details.');
}
}
async deleteScreenshotMetadata(params: DeleteScreenshotMetadataParams): Promise<void> {
const screenshotStorageFolder = normalizePath(this.settings.screenshotStorageFolderPath);
const metadata = this.plugin.metadata;
let metadataToDelete;
if (params.identityType === 'id') {
metadataToDelete = metadata.find(item => item.id === params.identity);
} else if (params.identityType === 'timestamp') {
metadataToDelete = metadata.find(item => item.timestamp === params.identity);
}
if (metadataToDelete) {
const currentMetadata = metadataToDelete;
this.logger.debug(`Current Metadata: ${JSON.stringify(currentMetadata, null, 2)}`);
this.logger.debug(`Deleting metadata for ${params.identity}`);
if (currentMetadata?.metadataPath) {
await this.app.vault.adapter.trashLocal(currentMetadata.metadataPath);
} else {
const screenshotFilename = currentMetadata.screenshotFilename.split('.').slice(0, -1).join('.');
const metadataFilename = `${screenshotFilename}.json`;
const metadataPath = normalizePath(`${screenshotStorageFolder}/${metadataFilename}`);
await this.app.vault.adapter.trashLocal(metadataPath);
}
if (currentMetadata?.screenshotStoragePath) {
await this.app.vault.adapter.trashLocal(currentMetadata.screenshotStoragePath);
}
}
}
async updateScreenshotMetadata(updatedMetadata: any): Promise<void> {
try {
await this.plugin.dataManager.addOrUpdateEntry(updatedMetadata);
} catch (error) {
this.logger.error('Error updating screenshot metadata:', error);
new Notice('Failed to update screenshot metadata. See console for details.');
throw error;
}
}
async updateScreenshotMetadataOriginal(updatedMetadata: any): Promise<void> {
try {
// Get the path to the metadata file
const metadataPath = updatedMetadata.metadataPath;
if (!metadataPath) {
throw new Error('Metadata path not found in the metadata object');
}
// Read the existing metadata file
const file = this.app.vault.getAbstractFileByPath(metadataPath);
if (!file || !(file instanceof TFile)) {
throw new Error(`Metadata file not found at path: ${metadataPath}`);
}
// Update the note content if notes were changed
if (updatedMetadata.notePath) {
const noteFile = this.app.vault.getAbstractFileByPath(updatedMetadata.notePath);
if (noteFile instanceof TFile) {
const currentNoteContent = await this.app.vault.read(noteFile);
// Replace the tags section in the note
const formattedTags = tagsToCommaString(formatTags(updatedMetadata.extractedTags));
const updatedNoteContent = currentNoteContent.replace(
/\*Tags:\*.*/,
`*Tags:* ${formattedTags}`
);
// Replace the notes section (everything between the title and the first ---)
const titleAndNotes = updatedNoteContent.split('---')[0];
const restOfContent = updatedNoteContent.split('---').slice(1).join('---');
const updatedTitleAndNotes = titleAndNotes.replace(
/# Notes from Screenshot:.*?\n\n(.*?)\n\n/s,
`# Notes from Screenshot: ${updatedMetadata.noteTitle.replace('.md', '')}\n\n${updatedMetadata.generatedNotes}\n\n`
);
const finalNoteContent = `${updatedTitleAndNotes}---${restOfContent}`;
await this.app.vault.modify(noteFile, finalNoteContent);
}
}
// Save the updated metadata to the JSON file
await this.app.vault.modify(file, JSON.stringify(updatedMetadata, null, 2));
new Notice('Screenshot metadata updated successfully');
} catch (error) {
this.logger.error('Error updating screenshot metadata:', error);
new Notice('Failed to update screenshot metadata. See console for details.');
throw error;
}
}
private async handleClipboardImage(): Promise<{ blob: Blob; type: string } | null> {
if (!navigator.clipboard || !navigator.clipboard.read) {
new Notice('Clipboard API is not supported in this browser.');
return null;
}
try {
const clipboardItems = await navigator.clipboard.read();
const imageItem = clipboardItems.find(item =>
item.types.some(type => type.startsWith('image/'))
);
if (!imageItem) {
new Notice('No image found in clipboard.');
return null;
}
const imageType = imageItem.types.find(type => type.startsWith('image/')) || 'image/png';
const blob = await imageItem.getType(imageType);
return { blob, type: imageType };
} catch (error) {
this.logger.error('Error reading from clipboard:', error);
new Notice('Failed to read image from clipboard.');
return null;
}
}
private async saveImageToVault(blob: Blob, type: string, folderPath: string): Promise<TFile | null> {
try {
const timestamp = new Date().toISOString().replace(/[:.-]/g, '');
const extension = type.split('/')[1];
const fileName = `clipboard-image-${timestamp}.${extension}`;
if (!await this.app.vault.adapter.exists(folderPath)) {
await this.app.vault.adapter.mkdir(folderPath);
}
const filePath = normalizePath(`${folderPath}/${fileName}`);
const arrayBuffer = await blob.arrayBuffer();
return await this.app.vault.createBinary(filePath, new Uint8Array(arrayBuffer));
} catch (error) {
this.logger.error('Error saving image to vault:', error);
new Notice('Failed to save image to vault.');
return null;
}
}
async uploadImageFromClipboard(onlyTempFile: boolean = false, returnFilePath: boolean = false): Promise<TFile | null> {
const clipboardData = await this.handleClipboardImage();
if (!clipboardData) return null;
const folderPath = onlyTempFile
? await this.plugin.getFolderFromSettingsKey('tempFolderPath')
: await this.plugin.getFolderFromSettingsKey('screenshotIntakeFolderPath');
const file = await this.saveImageToVault(clipboardData.blob, clipboardData.type, folderPath);
if (file) {
new Notice('Image upload from clipboard complete.');
return returnFilePath ? file : null;
}
return null;
}
async uploadAndProcessScreenshotFromClipboard(): Promise<void> {
try {
const { actions } = useQueueStore.getState();
actions.updateStatus({
message: 'Uploading from clipboard...',
progress: 20
});
const file = await this.uploadImageFromClipboard(true, true);
if (!file) {
actions.updateStatus({
message: '',
progress: 0
});
return;
}
if (!this.plugin.settings.disableDuplicateFileCheck) {
if (!(await shouldProcessImage(this.plugin, file, true))) {
this.logger.debug(`Skipping screenshot: ${file.path} — Duplicate or already processed.`);
return;
}
}
// Add to queue and let queue system handle the processing
this.plugin.processingQueue.addToQueue(file);
} catch (error) {
this.logger.error('Error uploading and processing screenshot from clipboard:', error);
new Notice('Failed to upload and process screenshot from clipboard.');
}
}
async deleteFile(filePath: string) {
await this.app.vault.adapter.trashLocal(filePath);
}
async processIntakeFolderAuto() {
const intakeDir = await this.plugin.getFolderFromSettingsKey('screenshotIntakeFolderPath');
if (!intakeDir) {
this.plugin.logger.warn('Intake directory not configured');
return;
}
const normalizedIntakeDir = normalizePath(intakeDir);
const allFiles = this.plugin.app.vault.getFiles();
const files = allFiles.filter(file => {
const ext = file.extension.toLowerCase();
return file.path.startsWith(normalizedIntakeDir) &&
['png', 'jpg', 'jpeg', 'gif', 'webp', 'heic', 'heif', 'avif'].includes(ext);
});
if (files.length > 0) {
for (const file of files) {
if (file instanceof TFile) {
if (await shouldProcessImage(this.plugin, file)) {
this.plugin.processingQueue.addToQueue(file);
}
}
}
}
}
async processIntakeFolder() {
let notice = new Notice("Running screenshot intake...", 0);
const folderPath = await this.plugin.getFolderFromSettingsKey('screenshotIntakeFolderPath');
const files = this.app.vault.getFolderByPath(folderPath);
if (files instanceof TFolder) {
for (const file of files.children) {
if (file instanceof TFile) {
this.plugin.processingQueue.addToQueue(file);
}
}
}
if (notice) {
notice.hide();
}
new Notice('Screenshots have been added to the processing queue.');
}
}

31
src/services/shared-functions.ts Normal file
View file

@ -0,0 +1,31 @@
import VisionRecallPlugin from '@/main';
export async function initializeFolders(plugin: VisionRecallPlugin) {
try {
const screenshotStorageFolder = await plugin.getFolderWithPrefixIfEnabled(plugin.settings.screenshotStorageFolderPath);
const screenshotIntakeFolder = await plugin.getFolderWithPrefixIfEnabled(plugin.settings.screenshotIntakeFolderPath);
const tempFolder = await plugin.getFolderWithPrefixIfEnabled(plugin.settings.tempFolderPath);
const outputNotesFolder = await plugin.getFolderWithPrefixIfEnabled(plugin.settings.outputNotesFolderPath);
if (!plugin.app.vault.getFolderByPath(screenshotStorageFolder)) {
await plugin.app.vault.createFolder(screenshotStorageFolder);
}
if (!plugin.app.vault.getFolderByPath(screenshotIntakeFolder)) {
await plugin.app.vault.createFolder(screenshotIntakeFolder);
}
if (!plugin.app.vault.getFolderByPath(tempFolder)) {
await plugin.app.vault.createFolder(tempFolder);
}
if (!plugin.app.vault.getFolderByPath(outputNotesFolder)) {
await plugin.app.vault.createFolder(outputNotesFolder);
}
return true;
} catch (error) {
this.logger.error('Error initializing folders:', error);
return false;
}
}

293
src/settings/SettingsPage.tsx Normal file
View file

@ -0,0 +1,293 @@
import VisionRecallPlugin from '@/main';
import { App, PluginSettingTab, Setting } from 'obsidian';
export default class VisionRecallSettingTab extends PluginSettingTab {
plugin: VisionRecallPlugin;
constructor(app: App, plugin: VisionRecallPlugin) {
super(app, plugin);
this.plugin = plugin;
}
display(): void {
const { containerEl } = this;
containerEl.empty();
new Setting(containerEl).setName('LLM').setHeading();
new Setting(containerEl)
.setName('LLM provider')
.setDesc('Which provider to use for LLM calls: OpenAI or Ollama.')
.addDropdown(dropdown => dropdown
.addOptions({
'openai': 'OpenAI',
'ollama': 'Ollama'
})
.setValue(this.plugin.settings.llmProvider)
.onChange(async (value: 'openai' | 'ollama') => {
this.plugin.settings.llmProvider = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('API key')
.setDesc('OpenAI API key (not needed for Ollama).')
.addText(text => text
.setPlaceholder('Enter your API key')
.setValue(this.plugin.settings.apiKey)
.onChange(async (value) => {
this.plugin.settings.apiKey = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('API base URL')
.setDesc('Custom API base URL for OpenAI-compatible endpoints or Ollama. Leave empty for defaults.')
.addText(text => text
.setPlaceholder('Leave empty for default')
.setValue(this.plugin.settings.apiBaseUrl)
.onChange(async (value) => {
this.plugin.settings.apiBaseUrl = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Vision model name')
.setDesc('Name of the Vision LLM model for screenshot analysis.')
.addText(text => text
.setPlaceholder('e.g., gpt-4o-mini')
.setValue(this.plugin.settings.visionModelName)
.onChange(async (value) => {
this.plugin.settings.visionModelName = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Endpoint LLM model name')
.setDesc('Name of the LLM model for generating notes from OCR text & vision LLM response.')
.addText(text => text
.setPlaceholder('e.g., gpt-4o-mini')
.setValue(this.plugin.settings.endpointLlmModelName)
.onChange(async (value) => {
this.plugin.settings.endpointLlmModelName = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl).setName('Storage').setHeading();
new Setting(containerEl)
.setName('Use parent folder')
.setDesc('Use a parent folder to store screenshots and notes.')
.addToggle(toggle => toggle
.setValue(this.plugin.settings.useParentFolder)
.onChange(async (value) => {
this.plugin.settings.useParentFolder = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Parent folder path')
.setDesc('Path to the parent folder. Optional if not using parent folder organization.')
.addText(text => text
.setPlaceholder('e.g., VisionRecall')
.setValue(this.plugin.settings.parentFolderPath)
.onChange(async (value) => {
this.plugin.settings.parentFolderPath = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Add prefix to folder names')
.setDesc('Add a prefix to the folder names.')
.addToggle(toggle => toggle
.setValue(this.plugin.settings.addPrefixToFolderNames)
.onChange(async (value) => {
this.plugin.settings.addPrefixToFolderNames = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Prefix to add to folder names')
.setDesc('Prefix for folder names. Optional.')
.addText(text => text
.setPlaceholder('e.g., VisionRecall-')
.setValue(this.plugin.settings.prefixToAddToFolderNames)
.onChange(async (value) => {
this.plugin.settings.prefixToAddToFolderNames = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Screenshot storage folder')
.setDesc('Folder within your vault for storing original screenshot files.')
.addText(text => text
.setPlaceholder('e.g., VisionRecall-Screenshots or Screenshots')
.setValue(this.plugin.settings.screenshotStorageFolderPath)
.onChange(async (value) => {
this.plugin.settings.screenshotStorageFolderPath = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Screenshot intake folder')
.setDesc('Folder for placing screenshots for automatic processing.')
.addText(text => text
.setPlaceholder('e.g., VisionRecall-Intake or Intake')
.setValue(this.plugin.settings.screenshotIntakeFolderPath)
.onChange(async (value) => {
this.plugin.settings.screenshotIntakeFolderPath = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Output notes folder')
.setDesc('Folder for generated Obsidian notes.')
.addText(text => text
.setPlaceholder('e.g., VisionRecall-Notes or Notes')
.setValue(this.plugin.settings.outputNotesFolderPath)
.onChange(async (value) => {
this.plugin.settings.outputNotesFolderPath = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Temp folder')
.setDesc('Folder for temporary files.')
.addText(text => text
.setPlaceholder('e.g., VisionRecall-Temp or Temp')
.setValue(this.plugin.settings.tempFolderPath)
.onChange(async (value) => {
this.plugin.settings.tempFolderPath = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl).setName('Output note').setHeading();
new Setting(containerEl)
.setName('Max response tokens')
.setDesc('Maximum token limit for LLM responses (default: 500).')
.addText(text => text
.setPlaceholder('500')
.setValue(this.plugin.settings.maxTokens.toString())
.onChange(async (value) => {
const parsedValue = parseInt(value);
if (!isNaN(parsedValue)) {
this.plugin.settings.maxTokens = parsedValue;
await this.plugin.saveSettings();
}
})
);
new Setting(containerEl)
.setName('Truncate OCR text')
.setDesc('Character limit for OCR text display. 0 to disable truncation.')
.addText(text => text
.setPlaceholder('500')
.setValue(this.plugin.settings.truncateOcrText.toString())
.onChange(async (value) => {
this.plugin.settings.truncateOcrText = parseInt(value);
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Truncate Vision LLM response')
.setDesc('Character limit for Vision LLM response display. 0 to disable truncation.')
.addText(text => text
.setPlaceholder('500')
.setValue(this.plugin.settings.truncateVisionLLMResponse.toString())
.onChange(async (value) => {
this.plugin.settings.truncateVisionLLMResponse = parseInt(value);
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Include metadata in note')
.setDesc('Whether to include metadata in the Obsidian note.')
.addToggle(toggle => toggle
.setValue(this.plugin.settings.includeMetadataInNote)
.onChange(async (value) => {
this.plugin.settings.includeMetadataInNote = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Linking tag prefix')
.setDesc('Parent prefix for note-linking tags.')
.addText(text => text
.setPlaceholder('e.g., VisionRecall')
.setValue(this.plugin.settings.tagPrefix)
.onChange(async (value) => {
this.plugin.settings.tagPrefix = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl).setName('Other').setHeading();
new Setting(containerEl)
.setName('Disable duplicate file check')
.setDesc('Disable the duplicate file check (which is based on a hash of the file content).')
.addToggle(toggle => toggle
.setValue(this.plugin.settings.disableDuplicateFileCheck)
.onChange(async (value) => {
this.plugin.settings.disableDuplicateFileCheck = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Show stop button in status bar')
.setDesc('Status bar button for stopping processing.')
.addToggle(toggle => toggle
.setValue(this.plugin.settings.showStatusBarButton)
.onChange(async (value) => {
this.plugin.settings.showStatusBarButton = value;
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName('Enable debug mode')
.setDesc('Detailed debugging information in console.')
.addToggle(toggle =>
toggle
.setValue(this.plugin.settings.debugMode)
.onChange(async (value) => {
this.plugin.settings.debugMode = value;
await this.plugin.saveSettings();
}));
new Setting(containerEl)
.setName('Enable deep link screenshot intake')
.setDesc('Screenshot intake functionality via deep links.')
.addToggle(toggle => toggle
.setValue(this.plugin.settings.allowDeepLinkScreenshotIntake)
.onChange(async (value) => {
this.plugin.settings.allowDeepLinkScreenshotIntake = value;
await this.plugin.saveSettings();
})
);
}
}

119
src/stores/queueStore.ts Normal file
View file

@ -0,0 +1,119 @@
import { create } from 'zustand';
import { QueueItem } from '@/services/ProcessingQueue';
import { TFile } from 'obsidian';
export type ProcessingStatus = {
isProcessing: boolean;
currentFile?: TFile;
progress: number;
total: number;
queue: QueueItem[];
message: string;
minimized: boolean;
maximized: boolean;
isStopped: boolean;
isPaused: boolean;
processingError?: string;
};
type QueueStore = {
status: ProcessingStatus;
actions: {
updateStatus: (status: Partial<ProcessingStatus>) => void;
addToQueue: (file: TFile) => void;
addMultipleToQueue: (files: TFile[]) => void;
clearQueue: () => void;
setMessage: (message: string) => void;
toggleMinimized: () => void;
toggleMaximized: () => void;
stopProcessing: () => void;
resumeProcessing: () => void;
pauseProcessing: () => void;
unpauseProcessing: () => void;
updateItemStatus: (filePath: string, status: QueueItem['status'], error?: string) => void;
removeFromQueue: (filePath: string) => void;
};
};
const DEFAULT_STATUS: ProcessingStatus = {
isProcessing: false,
progress: 0,
total: 0,
queue: [],
message: '',
minimized: false,
maximized: false,
isStopped: false,
isPaused: false,
processingError: undefined
};
export const useQueueStore = create<QueueStore>((set, get) => ({
status: DEFAULT_STATUS,
actions: {
updateStatus: (status) => set((state) => ({
status: { ...state.status, ...status }
})),
addToQueue: (file) => set((state) => ({
status: {
...state.status,
queue: [...state.status.queue, { file, status: 'pending' }],
total: state.status.total + 1
}
})),
addMultipleToQueue: (files) => set((state) => ({
status: {
...state.status,
queue: [
...state.status.queue,
...files.map(file => ({ file, status: 'pending' }))
],
total: state.status.total + files.length
}
})),
clearQueue: () => set({ status: DEFAULT_STATUS }),
setMessage: (message) => set((state) => ({
status: { ...state.status, message }
})),
toggleMinimized: () => set((state) => ({
status: { ...state.status, minimized: !state.status.minimized, maximized: false }
})),
toggleMaximized: () => set((state) => ({
status: { ...state.status, maximized: !state.status.maximized, minimized: false }
})),
stopProcessing: () => set((state) => ({
status: { ...state.status, isStopped: true, isProcessing: false, isPaused: false }
})),
resumeProcessing: () => set((state) => ({
status: {
...state.status,
isStopped: false,
isPaused: false
}
})),
pauseProcessing: () => set((state) => ({
status: { ...state.status, isPaused: true }
})),
unpauseProcessing: () => set((state) => ({
status: { ...state.status, isPaused: false }
})),
updateItemStatus: (filePath: string, status: QueueItem['status'], error?: string) =>
set((state) => ({
status: {
...state.status,
queue: state.status.queue.map(item =>
item.file.path === filePath
? { ...item, status, error }
: item
)
}
})),
removeFromQueue: (filePath: string) => set((state) => ({
status: {
...state.status,
queue: state.status.queue.filter(item => item.file.path !== filePath),
total: state.status.total - 1
}
}))
},
}));

53
src/styles/components/config-modal.css Normal file
View file

@ -0,0 +1,53 @@
.config-modal-form {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.config-field {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
/* padding: 0.5rem 0; */
padding-bottom: 1rem;
border-bottom: 1px solid var(--background-modifier-border);
}
.config-field label {
font-weight: 500;
/* margin-bottom: 0.25rem; */
}
.config-field-checkbox-label {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.config-field input[type='text'],
.config-field input[type='number'],
.config-field select {
padding: 0.5rem;
border-radius: 4px;
border: 1px solid var(--background-modifier-border);
background: var(--background-primary);
color: var(--text-normal);
}
.config-multiselect {
height: 100px;
padding: 0.5rem;
}
.config-modal-controls {
display: flex;
gap: 1rem;
justify-content: flex-end;
/* padding: 1rem 0; */
margin-top: 1rem;
}

43
src/styles/components/edit-metadata-modal.css Normal file
View file

@ -0,0 +1,43 @@
.edit-metadata-modal {
padding: 20px;
}
.edit-metadata-modal h3 {
margin-bottom: 20px;
}
.edit-metadata-modal .form-group {
margin-bottom: 15px;
}
.edit-metadata-modal label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
.edit-metadata-modal input,
.edit-metadata-modal textarea {
width: 100%;
padding: 8px;
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
}
.edit-metadata-modal .button-group {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
}
.edit-metadata-modal button {
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
.edit-metadata-modal button[type='submit'] {
background-color: var(--interactive-accent);
color: var(--text-on-accent);
}

88
src/styles/components/loaders.css Normal file
View file

@ -0,0 +1,88 @@
/* https://loading.io/css/ */
.lds-ellipsis,
.lds-ellipsis div {
box-sizing: border-box;
}
.lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 33.33333px;
width: 13.33333px;
height: 13.33333px;
border-radius: 50%;
background: currentColor;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
/* Different site */
/* HTML: <div class="loader"></div> */
.loader_l3 {
width: 60px;
aspect-ratio: 2;
--_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
background-size: calc(100% / 3) 50%;
animation: l3 1s infinite linear;
}
@keyframes l3 {
20% {
background-position: 0% 0%, 50% 50%, 100% 50%;
}
40% {
background-position: 0% 100%, 50% 0%, 100% 50%;
}
60% {
background-position: 0% 50%, 50% 100%, 100% 0%;
}
80% {
background-position: 0% 50%, 50% 50%, 100% 100%;
}
}

16
src/styles/components/processing-display.css Normal file
View file

@ -0,0 +1,16 @@
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
.animate-spin-slower {
animation: spin 2s linear infinite;
}

91
src/styles/components/processing-queue.css Normal file
View file

@ -0,0 +1,91 @@
.processing-queue-modal {
padding: 20px;
max-height: 500px;
display: flex;
flex-direction: column;
}
.queue-controls {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.queue-control-button {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 4px;
background-color: var(--background-modifier-hover);
color: var(--text-normal);
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.queue-control-button:hover {
background-color: var(--background-modifier-active);
}
.queue-status {
font-size: 14px;
margin-bottom: 16px;
}
.queue-stats {
display: flex;
gap: 15px;
margin-bottom: 20px;
padding: 10px;
background: var(--background-secondary);
border-radius: 5px;
font-size: 14px;
}
.queue-items {
overflow-y: auto;
flex-grow: 1;
}
.queue-item {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid var(--background-modifier-border);
gap: 10px;
}
.status-processing {
background: var(--background-modifier-hover);
}
.status-completed {
color: var(--text-success);
}
.status-failed {
color: var(--text-error);
}
.loading-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid var(--text-muted);
border-top-color: var(--text-normal);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.item-error {
color: var(--text-error);
font-size: 0.9em;
margin-left: auto;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}

79
src/styles/components/tag-combobox.css Normal file
View file

@ -0,0 +1,79 @@
.tag-combobox {
position: relative; /* For positioning suggestions */
background-color: var(--background-secondary);
border-radius: 8px;
border: 1px solid var(--background-modifier-border);
padding: 5px;
display: flex; /* For horizontal layout */
flex-wrap: wrap; /* Allow tags to wrap */
align-items: center; /* Vertically align items */
min-height: 30px; /* Ensure a reasonable minimum height */
}
.tag-input {
border: none;
outline: none;
flex-grow: 1; /* Take up remaining space */
padding: 5px;
min-width: 100px; /* Prevent collapsing when empty */
}
.selected-tags {
display: flex;
flex-wrap: wrap;
margin-right: 5px; /* Spacing from input */
}
.tag-pill {
/* background-color: var(--interactive-accent); */
background-color: var(--background-secondary-alt);
color: var(--text-on-accent);
padding: 4px 8px;
border-radius: 4px;
font-size: 0.9em;
margin: 2px;
display: inline-flex; /* For button alignment */
align-items: center;
}
.remove-tag-button {
background: none;
border: none;
color: #666;
cursor: pointer;
margin-left: 5px;
font-size: 0.8em;
padding: 0; /* Reset padding */
line-height: 1; /* Reset line-height */
width: 16px;
height: 16px;
}
.suggestions-list {
position: absolute; /* Position below the input */
top: 100%; /* Below the tag-combobox */
left: 0;
right: 0;
background-color: var(--background-secondary);
border: 1px solid var(--background-modifier-border);
/* border-top: none; */
/* border-radius: 0 0 4px 4px; */
border-radius: 4px;
list-style: none;
padding: 0;
margin: 0;
z-index: 10; /* Ensure it's above other content */
max-height: 200px; /* Limit height for scrollability */
overflow-y: auto;
overflow-x: clip;
box-sizing: border-box;
}
.suggestions-list li {
padding: 8px 10px;
cursor: pointer;
}
.suggestions-list li:hover {
background-color: var(--background-modifier-border);
}

94
src/styles/components/view-metadata-modal.css Normal file
View file

@ -0,0 +1,94 @@
.view-metadata-modal {
/* padding: 20px; */
/* max-width: 600px; */
margin: 0 auto;
}
.view-metadata-modal h3 {
margin-bottom: 20px;
font-size: 1.5em;
border-bottom: 1px solid var(--background-modifier-border);
padding-bottom: 10px;
}
.view-metadata-modal h4 {
/* margin: 15px 0 10px; */
margin: 0 0 0 0;
padding-bottom: 10px;
font-size: 1.1em;
color: var(--text-muted);
}
.metadata-section {
margin-bottom: 20px;
padding: 15px;
background-color: var(--background-secondary);
border-radius: 8px;
}
.metadata-group {
margin-bottom: 12px;
}
.metadata-group:last-child {
margin-bottom: 0;
}
.metadata-group label {
display: block;
font-weight: 600;
margin-bottom: 4px;
color: var(--text-muted);
font-size: 0.9em;
}
.metadata-value {
padding: 8px;
background-color: var(--background-primary);
border-radius: 4px;
border: 1px solid var(--background-modifier-border);
}
.metadata-value.scrollable {
max-height: 150px;
overflow-y: auto;
white-space: pre-wrap;
}
.metadata-value.tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
}
.tag {
background-color: var(--interactive-accent);
color: var(--text-on-accent);
padding: 4px 8px;
border-radius: 4px;
font-size: 0.9em;
}
.no-tags {
color: var(--text-muted);
font-style: italic;
}
.button-group {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.button-group button {
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
background-color: var(--interactive-normal);
color: var(--text-normal);
}
.button-group button:hover {
background-color: var(--interactive-hover);
}

418
src/styles/global.css Normal file
View file

@ -0,0 +1,418 @@
@import './components/processing-display.css';
@import './components/edit-metadata-modal.css';
@import './components/loaders.css';
@import './components/view-metadata-modal.css';
@import './components/config-modal.css';
@import './components/processing-queue.css';
@import './components/tag-combobox.css';
@tailwind base;
@layer base {
:root {
--dialog-width: calc(min(auto, 100%));
--dialog-height: calc(min(auto, 100%));
}
.settings-display {
padding: 1rem;
width: 100%;
max-width: 500px;
}
.setting-item {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid var(--background-modifier-border);
}
.setting-item:last-child {
border-bottom: none;
}
.setting-label {
font-weight: bold;
color: var(--text-muted);
}
.setting-value {
color: var(--text-normal);
}
.button-group {
margin-top: 1rem;
}
.model-item {
border-radius: 0.5rem;
cursor: pointer;
padding: 0.5rem;
border-bottom: 1px solid var(--background-modifier-border);
}
.model-item:hover {
background-color: var(--background-modifier-border);
}
.model-item:last-child {
border-bottom: none;
}
.queue-indicator {
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s ease;
}
.queue-indicator:hover {
opacity: 1;
}
.rotating {
animation: spin 2s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.vision-recall-status-bar-control {
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
.vision-recall-status-bar-control:hover {
opacity: 1;
}
.edge-tts-status-bar-control:hover {
color: var(--interactive-accent);
}
.loader {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #000;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}
.file-upload-modal {
z-index: 1;
}
.file-upload-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.clipboard-upload-button-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 40px;
}
.settings-header {
margin-top: 40px;
}
.vision-recall-view {
padding-right: 20px;
padding-left: 20px;
}
.vision-recall-view a,
.link {
color: var(--text-accent);
text-decoration: underline;
cursor: pointer;
}
.vision-recall-view a:hover,
.link:hover {
color: var(--text-accent-hover);
}
.vision-recall-view h2 {
/* margin-bottom: 20px; */
}
.vision-recall-view ul {
list-style-type: none;
padding: 0;
}
.vision-recall-view li {
/* margin-bottom: 20px; */
}
.vision-recall-view .view-filters {
margin-bottom: 10px;
}
.vision-recall-view .view-filters input[type='text'] {
width: 100%;
padding: 8px;
border: 1px solid var(--background-modifier-border); /* Use Obsidian theme variable for border */
border-radius: 5px;
background-color: var(
--background-primary
); /* Use Obsidian theme variable for background */
color: var(--text-normal); /* Use Obsidian theme variable for text color */
/* margin-bottom: 5px; Add some margin between input fields */
}
.vision-recall-view .metadata-list {
display: flex; /* Use flexbox for list layout */
flex-direction: column; /* Stack list items vertically */
border: 1px solid var(--background-modifier-border);
border-radius: 5px;
overflow: hidden; /* Clip any content that overflows rounded corners */
}
.vision-recall-view .metadata-list .list-header {
display: flex; /* Flexbox for header items */
background-color: var(
--background-modifier-hover
); /* Header background color */
padding: 8px 10px;
font-weight: bold;
border-bottom: 1px solid var(--background-modifier-border);
}
.vision-recall-view .metadata-list .list-header strong {
flex: 1; /* Distribute space evenly among header items */
text-align: left; /* Align header text to the left */
padding-right: 10px; /* Add some spacing between header items */
white-space: nowrap;
}
.vision-recall-view .metadata-list .list-item {
display: flex; /* Flexbox for list items */
padding: 10px 10px;
border-bottom: 1px solid var(--background-modifier-border); /* Separator between items */
}
.vision-recall-view .metadata-list .list-item:last-child {
border-bottom: none; /* Remove border from the last item */
}
.vision-recall-view .metadata-list .list-item span {
flex: 1; /* Distribute space evenly among item spans */
text-align: left; /* Align text to the left */
padding-right: 10px; /* Spacing between spans in items */
overflow: hidden; /* Ensure text ellipsis works */
text-overflow: ellipsis; /* Ellipsis for overflowing text */
white-space: nowrap; /* Prevent text wrapping */
padding-bottom: 10px;
}
/* Adjust width for specific columns if needed */
.vision-recall-view .metadata-list .list-header strong:nth-child(1), /* Screenshot Filename */
.vision-recall-view .metadata-list .list-item span:nth-child(1) {
flex: 1;
}
.vision-recall-view .metadata-list .list-header strong:nth-child(2), /* Note Path */
.vision-recall-view .metadata-list .list-item span:nth-child(2) {
flex: 1;
}
.vision-recall-view .metadata-list .list-header strong:nth-child(3), /* Timestamp */
.vision-recall-view .metadata-list .list-item span:nth-child(3) {
flex: 1.5;
}
.vision-recall-view .metadata-list .list-header strong:nth-child(4), /* Extracted Tags */
.vision-recall-view .metadata-list .list-item span:nth-child(4) {
flex: 2;
}
.vision-recall-view .metadata-list .list-header strong:nth-child(5), /* Actions */
.vision-recall-view .metadata-list .list-item span:nth-child(5) {
flex: 1;
justify-content: end;
flex-direction: row;
align-items: end;
text-align: right;
min-width: fit-content;
width: fit-content;
padding-right: 0px;
}
.vision-recall-view .view-filters label {
margin-right: 5px;
}
.vision-recall-view .view-filters input[type='date'] {
padding: 8px;
border: 1px solid var(--background-modifier-border);
border-radius: 5px;
background-color: var(--background-primary);
color: var(--text-normal);
/* margin-bottom: 5px; */
}
}
@tailwind components;
@tailwind utilities;
/* Add these styles to your existing CSS */
.pagination-controls {
padding: 8px;
border-top: 1px solid var(--background-modifier-border);
}
.pagination-controls button {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
background-color: var(--background-primary);
}
.pagination-controls button:hover:not(:disabled) {
background-color: var(--background-modifier-hover);
}
.pagination-controls .items-per-page-select {
padding: 4px 8px;
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
background-color: var(--background-primary);
}
.pagination-info {
padding: 0 8px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
padding: 1rem;
}
.gallery-item {
background: var(--background-secondary);
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s;
}
.gallery-item:hover {
transform: translateY(-2px);
}
.gallery-image-container {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
}
.gallery-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
.gallery-image-container:hover .gallery-overlay {
opacity: 1;
}
.gallery-button {
background: var(--interactive-accent);
color: var(--text-on-accent);
padding: 0.5rem 1rem;
border-radius: 4px;
border: none;
cursor: pointer;
margin-bottom: 0.5rem;
}
.gallery-actions {
display: flex;
gap: 1rem;
color: white;
}
.gallery-info {
padding: 0.75rem;
}
.gallery-filename {
font-weight: bold;
margin-bottom: 0.25rem;
}
.gallery-date {
color: var(--text-muted);
font-size: 0.9em;
margin-bottom: 0.25rem;
}
.gallery-tags {
color: var(--text-muted);
font-size: 0.9em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vision-recall-status-bar-controls {
display: flex;
gap: 8px;
align-items: center;
}
/* Screenshot Modal Styles */
.screenshot-modal-content {
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.screenshot-modal-link {
display: block;
margin: auto;
cursor: pointer;
}
.screenshot-modal-image {
display: block;
margin: auto;
max-width: 100%;
max-height: 80vh;
height: auto;
width: auto;
}

22
src/types/config-types.ts Normal file
View file

@ -0,0 +1,22 @@
export interface Config {
enableAutoIntakeFolderProcessing?: boolean;
enablePeriodicIntakeFolderProcessing?: boolean;
intakeFolderPollingInterval?: number;
enableAdvancedLogging?: boolean;
defaultMinimizedProgressDisplay?: boolean;
experimentalFeatures?: string[];
[key: string]: unknown;
}
export const DefaultConfig: Config = {
enableAutoIntakeFolderProcessing: false,
enablePeriodicIntakeFolderProcessing: false,
intakeFolderPollingInterval: 300, // 300 seconds, or 5 minutes
defaultMinimizedProgressDisplay: false, // Currently not functional
experimentalFeatures: []
};

6
src/types/processing-types.ts Normal file
View file

@ -0,0 +1,6 @@
export interface ProcessedFileRecord {
size: number;
mtime: number;
hash: string;
}

73
src/types/settings-types.ts Normal file
View file

@ -0,0 +1,73 @@
// options | 'gemini' | 'claude' | 'groq' | 'azure'
export interface VisionRecallPluginSettings {
llmProvider: 'openai' | 'ollama';
apiKey: string;
apiBaseUrl: string;
visionModelName: string;
endpointLlmModelName: string;
useParentFolder: boolean;
parentFolderPath: string;
addPrefixToFolderNames: boolean;
prefixToAddToFolderNames: string;
screenshotStorageFolderPath: string;
screenshotIntakeFolderPath: string;
outputNotesFolderPath: string;
maxTokens: number;
truncateOcrText: number;
truncateVisionLLMResponse: number;
includeMetadataInNote: boolean;
tempFolderPath: string;
tagPrefix: string;
disableDuplicateFileCheck: boolean;
showStatusBarButton: boolean;
debugMode: boolean;
allowDeepLinkScreenshotIntake: boolean;
}
export const DEFAULT_SETTINGS: VisionRecallPluginSettings = {
llmProvider: 'openai',
apiKey: '',
apiBaseUrl: '',
visionModelName: 'gpt-4o-mini',
endpointLlmModelName: 'gpt-4o-mini',
useParentFolder: true,
parentFolderPath: 'VisionRecall',
addPrefixToFolderNames: false,
prefixToAddToFolderNames: 'VisionRecall-',
screenshotStorageFolderPath: 'Screenshots',
screenshotIntakeFolderPath: 'Intake',
outputNotesFolderPath: 'Notes',
maxTokens: 500,
truncateOcrText: 500,
truncateVisionLLMResponse: 500,
includeMetadataInNote: true,
tempFolderPath: 'Temp',
tagPrefix: 'VisionRecall',
disableDuplicateFileCheck: false,
showStatusBarButton: true,
debugMode: false,
allowDeepLinkScreenshotIntake: false,
}
export type SettingsKey = keyof VisionRecallPluginSettings;

393
src/views/BaseView.tsx Normal file
View file

@ -0,0 +1,393 @@
import React, { useState, useEffect } from 'react';
import { useObsidianApp, usePlugin } from '@/context';
import VisionRecallPlugin from '@/main';
import { MainViewHeader } from '@/components/MainViewHeader';
import { InitializeFolders } from '@/components/InitializeFolders';
import { useDataContext } from '@/data/DataContext';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { STORAGE_KEYS, DEFAULT_ITEMS_PER_PAGE } from '@/constants';
import TagCombobox from '@/components/ui/tag-combobox';
export interface BaseViewProps {
initialMetadata: any[];
viewMode: 'list' | 'gallery';
onViewModeChange: (mode: 'list' | 'gallery') => void;
}
export interface FilterState {
searchQuery: string;
tagFilterQuery: string[];
tagsInclusive: boolean;
startDate: string | null;
endDate: string | null;
}
export interface PaginationState {
currentPage: number;
itemsPerPage: number;
totalPages: number;
startIndex: number;
endIndex: number;
currentItems: any[];
}
// Define sort criteria type
type SortCriteria = {
// column: keyof typeof metadata[0] | null; // Column to sort by
column: any; // Column to sort by
direction: 'asc' | 'desc'; // Sorting direction
};
export const useBaseView = ({ initialMetadata, viewMode, onViewModeChange }: BaseViewProps) => {
const app = useObsidianApp();
const plugin = usePlugin<VisionRecallPlugin>();
const dataManager = useDataContext();
const [metadata, setMetadata] = useState(initialMetadata);
const [filters, setFilters] = useState<FilterState>({
searchQuery: '',
tagFilterQuery: [],
tagsInclusive: true,
startDate: null,
endDate: null,
});
const [filteredMetadata, setFilteredMetadata] = useState([]);
const [foldersInitialized, setFoldersInitialized] = useState<boolean>(() => {
const saved = localStorage.getItem('vision-recall-initialize-folders');
return saved ? saved === 'true' : false;
});
const allAvailableTags = dataManager.getAvailableTags();
const [filterTags, setFilterTags] = useState<string[]>([]); // To store the selected tags for filtering
const handleTagFilterChange = (tags: string[]) => {
setFilterTags(tags);
// setFilters(prev => ({ ...prev, tagFilterQuery: tags.join(',') }));
// Now you can use 'tags' to filter your screenshot data
// console.log("Selected filter tags:", tags);
// ... your filtering logic here ...
};
useEffect(() => {
setFilters(prev => ({ ...prev, tagFilterQuery: filterTags }));
}, [filterTags]);
const handleTagFilterInclusiveChange = (inclusive: boolean) => {
setFilters(prev => ({ ...prev, tagsInclusive: inclusive }));
};
// Pagination state
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(() => {
try {
const saved = localStorage.getItem(STORAGE_KEYS.ITEMS_PER_PAGE);
const parsed = saved ? Number(saved) : DEFAULT_ITEMS_PER_PAGE;
return isNaN(parsed) ? DEFAULT_ITEMS_PER_PAGE : parsed;
} catch (e) {
console.warn('Failed to load items per page preference:', e);
return DEFAULT_ITEMS_PER_PAGE;
}
});
const [sortCriteria, setSortCriteria] = useState<SortCriteria>(() => {
try {
const saved = localStorage.getItem(STORAGE_KEYS.SORT_CRITERIA);
const parsed = saved ? JSON.parse(saved) : {
column: 'timestamp',
direction: 'desc'
};
return parsed;
} catch (e) {
console.warn('Failed to load sort criteria:', e);
return {
column: 'timestamp',
direction: 'desc'
};
}
});
// Function to handle column header clicks for sorting
const handleSort = (columnName: keyof typeof metadata[0]) => {
try {
const newSortCriteria = {
column: columnName,
direction: sortCriteria.column === columnName && sortCriteria.direction === 'asc' ? 'desc' : 'asc', // Toggle direction if same column is clicked
} as SortCriteria;
setSortCriteria(newSortCriteria);
localStorage.setItem(STORAGE_KEYS.SORT_CRITERIA, JSON.stringify(newSortCriteria));
} catch (e) {
console.warn('Failed to save sort criteria:', e);
}
};
// Filter metadata based on search query and tags
useEffect(() => {
let currentMetadata = [...metadata];
// if (filters.searchQuery || filters.tagFilterQuery || filters.startDate || filters.endDate) {
// currentMetadata = currentMetadata.filter(item => {
// const matchesSearch = !filters.searchQuery ||
// item.originalFilename.toLowerCase().includes(filters.searchQuery.toLowerCase()) ||
// (item.ocrText && item.ocrText.toLowerCase().includes(filters.searchQuery.toLowerCase())) ||
// (item.generatedNotes && item.generatedNotes.toLowerCase().includes(filters.searchQuery.toLowerCase()));
// const matchesTags = !filters.tagFilterQuery ||
// (item.extractedTags && item.extractedTags.some(tag =>
// tag.toLowerCase().includes(filters.tagFilterQuery.toLowerCase())
// ));
// const itemDate = new Date(item.timestamp);
// const matchesDateRange = (!filters.startDate || itemDate >= new Date(filters.startDate)) &&
// (!filters.endDate || itemDate <= new Date(filters.endDate));
// return matchesSearch && matchesTags && matchesDateRange;
// });
// }
// 1. Search Query Filter
if (filters.searchQuery) {
const lowerCaseQuery = filters.searchQuery.toLowerCase();
currentMetadata = currentMetadata.filter(item => {
return (
item.originalFilename.toLowerCase().includes(lowerCaseQuery) ||
(item.ocrText && item.ocrText.toLowerCase().includes(lowerCaseQuery)) ||
(item.generatedNotes && item.generatedNotes.toLowerCase().includes(lowerCaseQuery)) ||
(item.visionLLMResponse && item.visionLLMResponse.toLowerCase().includes(lowerCaseQuery)) ||
(item.extractedTags && item.extractedTags.some(tag => tag.toLowerCase().includes(lowerCaseQuery)))
);
});
}
// 2. Tag Filter
if (filters.tagFilterQuery.length > 0) {
const lowerCaseTags = filters.tagFilterQuery.map(tag => tag.toLowerCase());
currentMetadata = currentMetadata.filter(item => {
if (!item.extractedTags) return false; // Skip if no tags
return filters.tagsInclusive ?
item.extractedTags.some(tag => lowerCaseTags.includes(tag.toLowerCase())) :
lowerCaseTags.every(tag => item.extractedTags.map(t => t.toLowerCase()).includes(tag));
});
}
// 3. Date Range Filter
if (filters.startDate || filters.endDate) {
currentMetadata = currentMetadata.filter(item => {
const itemDate = new Date(item.timestamp);
const start = filters.startDate ? new Date(filters.startDate) : null;
const end = filters.endDate ? new Date(filters.endDate) : null;
if (start) {
start.setUTCHours(0, 0, 0, 0); // Set time to midnight
}
if (end) {
end.setUTCHours(23, 59, 59, 999); // Set time to end of day, to include the whole end date
}
if (start && end) {
return itemDate >= start && itemDate <= end;
} else if (start) {
return itemDate >= start;
} else if (end) {
return itemDate <= end;
}
return true; // No date filter applied if start or end is not set
});
}
// 4. Sorting
if (sortCriteria.column) {
currentMetadata.sort((a, b) => {
const column = sortCriteria.column as keyof typeof a; // Type assertion for column
const direction = sortCriteria.direction;
let valueA = a[column];
let valueB = b[column];
if (typeof valueA === 'string' && typeof valueB === 'string') {
valueA = valueA.toLowerCase();
valueB = valueB.toLowerCase();
} else if (column === 'timestamp') { // Compare timestamps as dates
valueA = new Date(valueA as string).getTime();
valueB = new Date(valueB as string).getTime();
}
if (valueA < valueB) return direction === 'asc' ? -1 : 1;
if (valueA > valueB) return direction === 'asc' ? 1 : -1;
return 0;
});
}
setFilteredMetadata(currentMetadata);
}, [metadata, filters, sortCriteria]);
async function refreshMetadata() {
setMetadata(plugin.dataManager.getAllEntries());
}
useEffect(() => {
refreshMetadata();
}, [dataManager]);
const getPaginationState = (): PaginationState => {
const totalPages = Math.ceil(filteredMetadata.length / itemsPerPage);
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const currentItems = filteredMetadata.slice(startIndex, endIndex);
return {
currentPage,
itemsPerPage,
totalPages,
startIndex,
endIndex,
currentItems,
};
};
const handlePageChange = (newPage: number) => {
const totalPages = Math.ceil(filteredMetadata.length / itemsPerPage);
setCurrentPage(Math.max(1, Math.min(newPage, totalPages)));
};
const handleItemsPerPageChange = (newValue: number) => {
try {
setItemsPerPage(newValue);
setCurrentPage(1);
localStorage.setItem(STORAGE_KEYS.ITEMS_PER_PAGE, newValue.toString());
} catch (e) {
console.warn('Failed to save items per page preference:', e);
}
};
const renderPagination = () => {
const { currentPage, itemsPerPage, totalPages, startIndex, endIndex } = getPaginationState();
return (
<div className="pagination-controls flex flex-row justify-between items-center mt-4">
<div className="flex items-center gap-2">
<select
value={itemsPerPage}
onChange={(e) => handleItemsPerPageChange(Number(e.target.value))}
className="items-per-page-select"
>
<option value="3">3 per page</option>
<option value="6">6 per page</option>
<option value="12">12 per page</option>
<option value="24">24 per page</option>
<option value="48">48 per page</option>
{/* <option value="5">5 per page</option>
<option value="10">10 per page</option>
<option value="20">20 per page</option>
<option value="50">50 per page</option> */}
</select>
<span className="text-text-muted">
Showing {startIndex + 1}-{Math.min(endIndex, filteredMetadata.length)} of {filteredMetadata.length} items
</span>
</div>
<div className="flex items-center gap-2">
<button
onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}
className={`pagination-button flex items-center ${currentPage === 1 ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
>
<ChevronLeft className="w-4 h-4" />
Previous
</button>
<span className="pagination-info">
Page {currentPage} of {totalPages}
</span>
<button
onClick={() => handlePageChange(currentPage + 1)}
disabled={currentPage === totalPages}
className={`pagination-button flex items-center ${currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
>
Next
<ChevronRight className="w-4 h-4" />
</button>
</div>
</div>
);
};
const renderEmptyState = () => (
<div className='vision-recall-view h-full'>
<MainViewHeader
metadata={metadata}
refreshMetadata={refreshMetadata}
viewMode={viewMode}
onViewModeChange={onViewModeChange}
/>
<div className='flex flex-col gap-4 justify-center items-center h-full'>
No screenshots found.
<InitializeFolders
foldersInitialized={foldersInitialized}
setFoldersInitialized={setFoldersInitialized}
/>
</div>
</div>
);
const renderFilters = () => (
<div className="view-filters mb-4">
<input
type="text"
placeholder="Search..."
value={filters.searchQuery}
onChange={(e) => setFilters(prev => ({ ...prev, searchQuery: e.target.value }))}
className="w-full mb-2"
/>
<div className='flex flex-row justify-between items-center gap-2'>
<TagCombobox
availableTags={Array.from(allAvailableTags)}
tagCounts={dataManager.getTagCounts()}
onTagChange={handleTagFilterChange}
initialTags={[]} // Optionally pre-select tags
isInclusive={filters.tagsInclusive}
onInclusiveChange={handleTagFilterInclusiveChange}
/>
{/* <input
type="text"
placeholder="Filter by tags (comma-separated)"
value={filters.tagFilterQuery}
onChange={(e) => setFilters(prev => ({ ...prev, tagFilterQuery: e.target.value }))}
className="flex-1"
/> */}
<div className='flex flex-row h-full items-center gap-2 justify-center'>
<input
type="date"
value={filters.startDate || ''}
onChange={(e) => setFilters(prev => ({ ...prev, startDate: e.target.value || null }))}
/>
<span className='text-text-muted'>to</span>
<input
type="date"
value={filters.endDate || ''}
onChange={(e) => setFilters(prev => ({ ...prev, endDate: e.target.value || null }))}
/>
</div>
</div>
</div>
);
return {
app,
plugin,
metadata,
filteredMetadata,
refreshMetadata,
foldersInitialized,
renderEmptyState,
renderFilters,
paginationState: getPaginationState(),
handlePageChange,
handleItemsPerPageChange,
renderPagination,
sortCriteria,
handleSort,
};
};

169
src/views/GalleryView.tsx Normal file
View file

@ -0,0 +1,169 @@
import React from 'react';
import { TFile, getLinkpath } from 'obsidian';
import { ScreenshotModal } from '../components/modals/ScreenshotModal';
import { ArrowDown, ArrowUp, Edit, Eye, NotepadText, Trash2 } from 'lucide-react';
import { DateTime } from 'luxon';
import { EditMetadataModal } from '../components/modals/EditMetadataModal';
import { MainViewHeader } from '@/components/MainViewHeader';
import { ViewMetadataModal } from '../components/modals/ViewMetadataModal';
import { openNoteWithTag } from '@/services/note-link-service';
import { BaseViewProps, useBaseView } from './BaseView';
const GalleryView = (props: BaseViewProps) => {
const {
app,
plugin,
metadata,
filteredMetadata,
refreshMetadata,
renderEmptyState,
renderFilters,
paginationState,
renderPagination,
sortCriteria,
handleSort,
} = useBaseView(props);
const openNote = async (notePath: string, uniqueIdentifier: string | null) => {
const file = app.vault.getAbstractFileByPath(notePath);
if (file instanceof TFile) {
await app.workspace.openLinkText(getLinkpath(file.path), '', false, { active: true });
} else if (uniqueIdentifier) {
await openNoteWithTag(plugin, uniqueIdentifier);
}
};
if (!metadata || metadata.length === 0) {
return renderEmptyState();
}
return (
<div className="vision-recall-view">
<MainViewHeader
metadata={metadata}
refreshMetadata={refreshMetadata}
viewMode={props.viewMode}
onViewModeChange={props.onViewModeChange}
/>
{renderFilters()}
<div className="flex flex-row justify-between">
<div className='flex flex-row items-center gap-2'>
<div className='flex flex-row items-center gap-2'>
Sort by:
</div>
<select
className='cursor-pointer'
value={sortCriteria.column}
onChange={(e) => handleSort(e.target.value)}
>
<option value="timestamp">Date & Time</option>
<option value="screenshotFilename">Screenshot Filename</option>
<option value="notePath">Note Path</option>
</select>
<button
aria-label={`Sort by ${sortCriteria.column} ${sortCriteria.direction === 'desc' ? 'ascending' : 'descending'}`}
className='cursor-pointer'
onClick={() => handleSort(sortCriteria.column)}
>
{sortCriteria.direction === 'asc' ? <ArrowUp className='w-4 h-4' /> : <ArrowDown className='w-4 h-4' />}
</button>
</div>
</div>
<div className="gallery-grid">
{paginationState.currentItems.map((item, index) => (
<div key={index} className="gallery-item">
<div className="gallery-image-container">
<img
src={app.vault.adapter.getResourcePath(item.screenshotStoragePath)}
alt={item.screenshotFilename}
onClick={() => {
new ScreenshotModal(app, item.screenshotStoragePath).open();
}}
className="gallery-image cursor-pointer"
aria-label={`Open screenshot: ${item.screenshotFilename}`}
data-tooltip-position="top"
/>
<div className="gallery-overlay">
<div className="flex flex-col items-center justify-center pointer-events-auto">
<button
onClick={() => openNote(item.notePath, item?.uniqueTag || item?.uniqueName || null)}
className="gallery-button"
>
Open Note
</button>
<div className="gallery-actions">
<span
aria-label="View screenshot"
className="w-5 h-5 cursor-pointer"
onClick={() => {
new ScreenshotModal(app, item.screenshotStoragePath).open();
}}
>
<Eye />
</span>
<span
aria-label="View metadata"
className="w-5 h-5 cursor-pointer"
onClick={() => {
new ViewMetadataModal(app, plugin, item).open();
}}
>
<NotepadText />
</span>
<span
aria-label="Edit tags"
className="w-5 h-5 cursor-pointer"
onClick={() => {
new EditMetadataModal(app, plugin, item, refreshMetadata).open();
}}
>
<Edit />
</span>
<span
aria-label="Delete screenshot"
className="w-5 h-5 cursor-pointer"
onClick={async () => {
const shouldDelete = window.confirm('Are you sure you want to delete this screenshot and its metadata?');
if (shouldDelete) {
await plugin.screenshotProcessor.deleteScreenshotMetadata({
identity: item.timestamp,
identityType: 'timestamp'
});
await refreshMetadata();
}
}}
>
<Trash2 />
</span>
</div>
</div>
</div>
</div>
<div className="gallery-info">
<div
// aria-label={`Open note: ${item.notePath}`}
aria-label={'Open note'}
data-tooltip-position="top"
className="gallery-filename cursor-pointer"
onClick={() => {
openNote(item.notePath, item?.uniqueTag || item?.uniqueName || null);
}}
>
{item.screenshotFilename}
</div>
<div className="gallery-date">
{DateTime.fromISO(item.timestamp).toFormat('yyyy/MM/dd HH:mm')}
</div>
<div className="gallery-tags">
{item.extractedTags ? item.extractedTags.join(', ') : 'No Tags'}
</div>
</div>
</div>
))}
</div>
{renderPagination()}
</div>
);
};
export default GalleryView;

159
src/views/ListView.tsx Normal file
View file

@ -0,0 +1,159 @@
import React from 'react';
import { TFile, getLinkpath } from 'obsidian';
import { ScreenshotModal } from '../components/modals/ScreenshotModal';
import { Trash2, Edit, Eye } from 'lucide-react';
import { DateTime } from 'luxon';
import { EditMetadataModal } from '../components/modals/EditMetadataModal';
import { MainViewHeader } from '@/components/MainViewHeader';
import { ViewMetadataModal } from '../components/modals/ViewMetadataModal';
import { openNoteWithTag } from '@/services/note-link-service';
import { BaseViewProps, useBaseView } from './BaseView';
const ListView = (props: BaseViewProps) => {
const {
app,
plugin,
metadata,
filteredMetadata,
refreshMetadata,
renderEmptyState,
renderFilters,
paginationState,
renderPagination,
sortCriteria,
handleSort,
} = useBaseView(props);
const openNote = async (notePath: string, uniqueIdentifier: string | null) => {
const file = app.vault.getAbstractFileByPath(notePath);
if (file instanceof TFile) {
await app.workspace.openLinkText(getLinkpath(file.path), '', false, { active: true });
} else {
plugin.logger.info(`Note "${notePath}" not found.`);
if (!uniqueIdentifier) {
plugin.logger.info(`Note "${notePath}" not found.`);
return;
}
await openNoteWithTag(plugin, uniqueIdentifier);
}
};
if (!metadata || metadata.length === 0) {
return renderEmptyState();
}
return (
<div className="vision-recall-view">
<MainViewHeader
metadata={metadata}
refreshMetadata={refreshMetadata}
viewMode={props.viewMode}
onViewModeChange={props.onViewModeChange}
/>
{renderFilters()}
<ul className="metadata-list pb-10">
<li className="list-header">
<strong
aria-label='Sort by screenshot filename'
onClick={() => handleSort('screenshotFilename')}
style={{ cursor: 'pointer' }}
>
Screenshot {sortCriteria.column === 'screenshotFilename' && (sortCriteria.direction === 'asc' ? '▲' : '▼')}
</strong>
<strong
aria-label='Sort by note path'
onClick={() => handleSort('notePath')}
style={{ cursor: 'pointer' }}
>
Note {sortCriteria.column === 'notePath' && (sortCriteria.direction === 'asc' ? '▲' : '▼')}
</strong>
<strong
aria-label='Sort by timestamp'
onClick={() => handleSort('timestamp')}
style={{ cursor: 'pointer' }}
>
Date & Time {sortCriteria.column === 'timestamp' && (sortCriteria.direction === 'asc' ? '▲' : '▼')}
</strong>
<strong>Tags</strong>
<strong>Actions</strong>
</li>
{paginationState.currentItems.map((item, index) => (
<li key={index} className="list-item rounded-none">
<span
aria-label='View screenshot'
onClick={() => {
new ScreenshotModal(
app,
item.screenshotStoragePath
).open();
}}
className='link'
>
{item.screenshotFilename}
</span>
<span
aria-label='Open note'
onClick={() => openNote(item.notePath, item?.uniqueTag || item?.uniqueName || null)}
className='link'
>
{item.notePath.split('/').pop()}
</span>
<span>{DateTime.fromISO(item.timestamp).toFormat('yyyy/MM/dd HH:mm')}</span>
<span>{item.extractedTags ? item.extractedTags.join(', ') : 'No Tags'}</span>
<span className='flex flex-row items-center gap-2'>
<button
aria-label='View metadata'
className='cursor-pointer'
onClick={() => {
new ViewMetadataModal(
app,
plugin,
item,
).open();
}}
>
<Eye className='w-4 h-4' />
</button>
<button
aria-label='Edit metadata'
className='cursor-pointer'
onClick={() => {
new EditMetadataModal(
app,
plugin,
item,
refreshMetadata
).open();
}}
>
<Edit className='w-4 h-4' />
</button>
<button
aria-label='Delete screenshot'
className='cursor-pointer'
onClick={async () => {
const shouldDelete = window.confirm('Are you sure you want to delete this screenshot and its metadata?');
if (shouldDelete) {
await plugin.screenshotProcessor.deleteScreenshotMetadata({
identity: item.timestamp,
identityType: 'timestamp'
});
await refreshMetadata();
}
}}>
<Trash2 className='w-4 h-4' />
</button>
</span>
</li>
))}
</ul>
{renderPagination()}
</div>
);
};
export default ListView;

109
src/views/MainView.tsx Normal file
View file

@ -0,0 +1,109 @@
import { ItemView, WorkspaceLeaf } from 'obsidian';
import * as React from 'react';
import { Root, createRoot } from 'react-dom/client';
import { DataProvider } from '@/data/DataContext';
import { ObsidianAppContext, PluginContext, usePlugin } from '@/context';
import ListView from './ListView';
import GalleryView from './GalleryView';
import VisionRecallPlugin from '@/main';
import { DataManager } from '@/data/DataManager';
import { PLUGIN_ICON, PLUGIN_NAME } from '@/constants';
import { StrictMode } from 'react';
import { ProcessingDisplay } from '@/components/ProcessingDisplay';
export const MAIN_VIEW_TYPE = 'vision-recall-view';
export default class MainView extends ItemView {
root: Root | null = null;
plugin: VisionRecallPlugin;
dataManager: DataManager;
constructor(leaf: WorkspaceLeaf, plugin: VisionRecallPlugin, dataManager: DataManager) {
super(leaf);
this.plugin = plugin;
this.dataManager = dataManager;
}
getViewType() {
return MAIN_VIEW_TYPE;
}
getDisplayText() {
return 'Vision Recall';
}
getTitle(): string {
return PLUGIN_NAME;
}
getIcon(): string {
return PLUGIN_ICON;
}
async onOpen() {
const container = this.containerEl.children[1];
container.empty();
const metadata = this.plugin.dataManager.getAllEntries();
// Create wrapper div for React
const reactContainer = container.createDiv();
// Create React root and render app
this.root = createRoot(reactContainer);
this.root.render(
<StrictMode>
<ObsidianAppContext.Provider value={this.app}>
<PluginContext.Provider value={this.plugin}>
<DataProvider dataManager={this.dataManager}>
<ProcessingDisplay />
<ViewContainer initialMetadata={metadata} />
</DataProvider>
</PluginContext.Provider>
</ObsidianAppContext.Provider>
</StrictMode>
);
}
async onClose() {
if (this.root) {
this.root.unmount();
}
}
}
const ViewContainer = ({ initialMetadata }) => {
const plugin = usePlugin<VisionRecallPlugin>();
const [viewMode, setViewMode] = React.useState<'list' | 'gallery'>(() => {
try {
const saved = localStorage.getItem('vision-recall-view-mode');
return saved === 'gallery' ? 'gallery' : 'list';
} catch {
// return 'list';
return 'gallery';
}
});
const handleViewModeChange = (mode: 'list' | 'gallery') => {
setViewMode(mode);
try {
localStorage.setItem('vision-recall-view-mode', mode);
} catch (e) {
plugin.logger.error('Failed to save view mode preference:', e);
}
}
return viewMode === 'list' ? (
<ListView
initialMetadata={initialMetadata}
viewMode={viewMode}
onViewModeChange={handleViewModeChange}
/>
) : (
<GalleryView
initialMetadata={initialMetadata}
viewMode={viewMode}
onViewModeChange={handleViewModeChange}
/>
);
};

1386
styles.css Normal file
View file

File diff suppressed because it is too large Load diff

182
tailwind.config.ts Normal file
View file

@ -0,0 +1,182 @@
import containerQueries from "@tailwindcss/container-queries";
export default {
content: ["./src/**/*.{ts,tsx}"],
corePlugins: {
preflight: false,
},
theme: {
colors: {
base: {
"00": "var(--color-base-00)",
"05": "var(--color-base-05)",
"10": "var(--color-base-10)",
"20": "var(--color-base-20)",
"25": "var(--color-base-25)",
"30": "var(--color-base-30)",
"35": "var(--color-base-35)",
"40": "var(--color-base-40)",
"50": "var(--color-base-50)",
"60": "var(--color-base-60)",
"70": "var(--color-base-70)",
"100": "var(--color-base-100)",
},
red: "var(--color-red)",
"red-rgb": "rgba(var(--color-red-rgb),<alpha-value>)",
orange: "var(--color-orange)",
"orange-rgb": "rgba(var(--color-orange-rgb),<alpha-value>)",
yellow: "var(--color-yellow)",
"yellow-rgb": "rgba(var(--color-yellow-rgb),<alpha-value>)",
green: "var(--color-green)",
"green-rgb": "rgba(var(--color-green-rgb),<alpha-value>)",
cyan: "var(--color-cyan)",
"cyan-rgb": "rgba(var(--color-cyan-rgb),<alpha-value>)",
blue: "var(--color-blue)",
"blue-rgb": "rgba(var(--color-blue-rgb),<alpha-value>)",
purple: "var(--color-purple)",
"purple-rgb": "rgba(var(--color-purple-rgb),<alpha-value>)",
pink: "var(--color-pink)",
"pink-rgb": "rgba(var(--color-pink-rgb),<alpha-value>)",
gray: "var(--color-gray)",
"mono-rgb": {
"0": "rgba(var(--mono-rgb-0),<alpha-value>)",
"100": "rgba(var(--mono-rgb-100),<alpha-value>)",
},
background: {
primary: "var(--background-primary)",
"primary-alt": "var(--background-primary-alt)",
secondary: "var(--background-secondary)",
"secondary-alt": "var(--background-secondary-alt)",
modifier: {
hover: "var(--background-modifier-hover)",
"active-hover": "var(--background-modifier-active-hover)",
border: "var(--background-modifier-border)",
"border-hover": "var(--background-modifier-border-hover)",
"border-focus": "var(--background-modifier-border-focus)",
error: "var(--background-modifier-error)",
"error-rgb":
"rgba(var(--background-modifier-error-rgb),<alpha-value>)",
"error-hover": "var(--background-modifier-error-hover)",
success: "var(--background-modifier-success)",
"success-rgb":
"rgba(var(--background-modifier-success-rgb),<alpha-value>)",
message: "var(--background-modifier-message)",
"form-field": "var(--background-form-field)",
},
},
interactive: {
normal: "var(--interactive-normal)",
hover: "var(--interactive-hover)",
accent: "var(--interactive-accent)",
"accent-hsl":
"hsl(var(--interactive-accent-hsl),<alpha-value>)",
"accent-hover": "var(--interactive-accent-hover)",
},
text: {
normal: "var(--text-normal)",
muted: "var(--text-muted)",
faint: "var(--text-faint)",
"on-accent": "var(--text-on-accent)",
"on-accent-inverted": "var(--text-on-accent-inverted)",
success: "var(--text-success)",
warning: "var(--text-warning)",
error: "var(--text-error)",
accent: "var(--text-accent)",
"accent-hover": "var(--text-accent-hover)",
selection: "var(--text-selection)",
"highlight-bg": "var(--text-highlight-bg)",
bold: "var(--bold-color)",
italic: "var(--italic-color)",
},
caret: "var(--caret-color)",
icon: {
DEFAULT: "var(--icon-color)",
hover: "var(--icon-color-hover)",
active: "var(--icon-color-active)",
focused: "var(--icon-color-focused)",
},
},
borderWidth: {
DEFAULT: "var(--border-width)",
},
borderRadius: {
none: "0px",
"clickable-icon": "var(--clickable-icon-radius)",
s: "var(--radius-s)",
m: "var(--radius-m)",
l: "var(--radius-l)",
xl: "var(--radius-xl)",
full: "9999px",
},
zIndex: {
cover: "var(--layer-cover)",
sidedock: "var(--layer-sidedock)",
"status-bar": "var(--layer-status-bar)",
popover: "var(--layer-popover)",
slides: "var(--layer-slides)",
modal: "var(--layer-modal)",
notice: "var(--layer-notice)",
menu: "var(--layer-menu)",
tooltip: "var(--layer-tooltip)",
"dragged-item": "var(--layer-dragged-item)",
},
fontSize: {
text: "var(--font-text-size)",
smallest: "var(--font-smallest)",
smaller: "var(--font-smaller)",
small: "var(--font-small)",
"ui-smaller": "var(--font-ui-smaller)",
"ui-small": "var(--font-ui-small)",
"ui-medium": "var(--font-ui-medium)",
"ui-larger": "var(--font-ui-larger)",
},
strokeWidth: {
icon: "var(--icon-stroke)",
"icon-xs": "var(--icon-xs-stroke-width)",
"icon-s": "var(--icon-s-stroke-width)",
"icon-m": "var(--icon-m-stroke-width)",
"icon-l": "var(--icon-l-stroke-width)",
"icon-xl": "var(--icon-xl-stroke-width)",
},
fontWeight: {
thin: "var(--font-thin)",
extralight: "var(--font-extralight)",
light: "var(--font-light)",
normal: "var(--font-normal)",
medium: "var(--font-medium)",
semibold: "var(--font-semibold)",
bold: "var(--font-bold)",
extrabold: "var(--font-extrabold)",
black: "var(--font-black)",
},
lineHeight: {
normal: "var(--line-height-normal)",
tight: "var(--line-height-tight)",
},
extend: {
cursor: {
DEFAULT: "var(--cursor)",
link: "var(--cursor-link)",
},
size: {
icon: "var(--icon-size)",
"icon-xs": "var(--icon-xs)",
"icon-s": "var(--icon-s)",
"icon-m": "var(--icon-m)",
"icon-l": "var(--icon-l)",
"icon-xl": "var(--icon-xl)",
checkbox: "var(--checkbox-size)",
},
opacity: {
icon: "var(--icon-opacity)",
"icon-hover": "var(--icon-opacity-hover)",
"icon-active": "var(--icon-opacity-active)",
},
},
},
plugins: [
containerQueries,
],
};

24
tsconfig.json Normal file
View file

@ -0,0 +1,24 @@
{
"compilerOptions": {
"baseUrl": ".",
"inlineSourceMap": true,
"inlineSources": true,
"module": "ESNext",
"target": "ES2022",
"allowJs": true,
"noImplicitAny": false,
"moduleResolution": "node",
"importHelpers": true,
"isolatedModules": true,
"strictNullChecks": false,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"lib": ["DOM", "ES5", "ES6", "ES7", "ES2022"],
"jsx": "react",
"paths": {
"@/*": ["./src/*"]
},
},
"include": ["**/*.ts", "**/*.tsx", "types/*.d.ts"],
"exclude": ["node_modules"]
}

4
types/md.d.ts vendored Normal file
View file

@ -0,0 +1,4 @@
declare module '*.md' {
const content: string;
export default content;
}

14
version-bump.mjs Normal file
View file

@ -0,0 +1,14 @@
import { readFileSync, writeFileSync } from "fs";
const targetVersion = process.env.npm_package_version;
// read minAppVersion from manifest.json and bump version to target version
let manifest = JSON.parse(readFileSync("manifest.json", "utf8"));
const { minAppVersion } = manifest;
manifest.version = targetVersion;
writeFileSync("manifest.json", JSON.stringify(manifest, null, "\t"));
// update versions.json with target version and minAppVersion from manifest.json
let versions = JSON.parse(readFileSync("versions.json", "utf8"));
versions[targetVersion] = minAppVersion;
writeFileSync("versions.json", JSON.stringify(versions, null, "\t"));

3
versions.json Normal file
View file

@ -0,0 +1,3 @@
{
"1.0.0": "0.15.0"
}

56
vite.config.ts Normal file
View file

@ -0,0 +1,56 @@
import { UserConfig, defineConfig } from "vite";
import path from "path";
import builtins from "builtin-modules";
import react from "@vitejs/plugin-react";
export default defineConfig(async ({ mode }) => {
const { resolve } = path;
const prod = mode === "production";
return {
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
build: {
lib: {
entry: resolve(__dirname, "src/main.ts"),
name: "main",
fileName: () => "main.js",
formats: ["cjs"],
},
minify: prod,
sourcemap: prod ? false : "inline",
outDir: "./",
cssCodeSplit: false,
emptyOutDir: false,
rollupOptions: {
input: {
main: resolve(__dirname, "src/main.ts"),
},
output: {
entryFileNames: "main.js",
assetFileNames: "styles.css",
},
external: [
"obsidian",
"electron",
"@codemirror/autocomplete",
"@codemirror/collab",
"@codemirror/commands",
"@codemirror/language",
"@codemirror/lint",
"@codemirror/search",
"@codemirror/state",
"@codemirror/view",
"@lezer/common",
"@lezer/highlight",
"@lezer/lr",
...builtins,
],
},
},
} as UserConfig;
});