Display setup instructions from README in plugin for each AI service provider

[BhargavBhandari90]

Added a helper icon for "Select Provider" label. When clicked, it will open a popup modal with the selected AI setup instructions.

Here is the Demo:

https://go.screenpal.com/watch/cTiID3nl57n

Description of the Change

• Adding an instruction under the AI service provider
• Created a new Component for Instruction FieldInfo

Closes #925

How to test the Change

• Go to Tools --> ClassifAI
• Language Processing --> Toggle Classification
• Click Settings
• Select Provider and change provider one by one
• Click on ? icon

Changelog Entry

Added - New Component FieldInfo

Credits

Props @dkotter

Checklist:

• I agree to follow this project's Code of Conduct.
• I have updated the documentation accordingly.
• I have added Critical Flows, Test Cases, and/or End-to-End Tests to cover my change.
• All existing tests pass. ( Haven't added any new tests )

---

Extra NOTE:

• We have to add missing instructions listed here

[BhargavBhandari90]

@jeffpaul @dkotter

I have a question here:

• We have a lot of settings like:

  • Language Processing --> Classification --> Different AI setups ( IBM Watson, OpenAI, Azure, Ollama )
  • Language Processing --> Title Generation --> Different AI setups ( OpenAI, GoogleAI, Azure, Grok, Ollama )
  • ...
  • ...
  • ...
  • Image Processing
  • ...
  • ...
  • ...
  • Recommendation Service
  • ...
  • ...

• I found configuration instruction for Language Processing from the readme:

  • Language Processing --> Classification --> Confure via ( IBM, OpenAI )

• But didn't find Instructions Language Processing --> Classification for Azure & Ollama

• Similarly I didn't find instruction for other Language Processing, Image Processing & Recommended Service

In Short,

How can I find setup instruction for all the combinations?

Let me know if I am missing something here.

[dkotter]

Currently, this is just a kind of a prototype for possible solution for starting a discussion. If this works I will proceed with the full solution.

Thanks for starting work on this. Overall I think this looks okay but it is a little intrusive. I would suggest that instead of a new section that expands/collapses that we try something a little less in your face, so to speak. Maybe a question mark icon or info icon that shows next to Select a provider that when clicked, shows these instructions (maybe in a modal?).

How can I find setup instruction for all the combinations?

I believe the only place we have instructions for this right now is in the README.md file. So if there are combinations missing, those will need to be created

[BhargavBhandari90]

@dkotter Got it for popup model. I'll try to implement that.

I believe the only place we have instructions for this right now is in the README.md file. So if there are combinations missing, those will need to be created

• I think I will need someone's help who knows all of these instructions.

[BhargavBhandari90]

Hi @dkotter

• I've implemented popup for instructions.
• Here is how it looks https://go.screenpal.com/watch/cTiID3nl57n
• Let me know if this works.

Instructions not found for following combinations:

Language Processing

• Classification

  • Azure OpenAI Embeddings

• Title Generation

  • xAI Grok

• Excerpt Generation

  • xAI Grok

• Content Resizing

  • xAI Grok

• Key Takeaways

  • OpenAI ChatGPT
  • Azure OpenAI

---

Image Processing

• Descriptive Text Generator

  • OpenAI
  • xAI Grok

• Image Tags Generator

  • OpenAI ChatGPT

• Image Text Extraction

  • OpenAI ChatGPT

---

Recommendation Service

• Recommended Content

  • Microsoft Azure AI Personalizer

[dkotter]

I've implemented popup for instructions.
Here is how it looks https://go.screenpal.com/watch/cTiID3nl57n
Let me know if this works.

I like this, nice work here.

Do want to flag that we have another PR (#957) that does something similar. Seems like we should probably standardize between the two so we don't have different experiences for showing helper text.

[BhargavBhandari90]

Hi @dkotter

I saw the PR you mentioned. I am open for the standardization of this. Let me know how do we proceed and I'll do that.

---

My thoughts:

• In the PR Add helper text to Classification, Moderation & term cleanup screen #957, its a information
• In here, its an Instruction

So may be we can do something like passing the type of information instruction or information to a component. Then,

• Display icon as per the type beside the lable
• Display information when we hover or click on the icon.

[dkotter]

So may be we can do something like passing the type of information instruction or information to a component. Then,

Display icon as per the type beside the lable
Display information when we hover or click on the icon.

I like the idea of an easy to re-use component for this so I'm fine if you want to proceed with that. Thanks!

[BhargavBhandari90]

I like the idea of an easy to re-use component for this so I'm fine if you want to proceed with that. Thanks!

Thank you @dkotter for confirming this. I'll work on this.

[BhargavBhandari90]

@dkotter

• I've created a new component FieldInfo
• Added how to use as a documentation at here

Let me know your thought on this.

---

P.S

• Two Unit Tests are failing, because of some cURL timeout.
• Not sure if it has something to do with my changes or not.

[BhargavBhandari90]

@dkotter e2e test is failing for edit media screen https://github.com/10up/classifai/actions/runs/16385979320/job/46305527056?pr=953#step:8:260

But I haven't made changes for that. Not sure if my changes affected something here?

[dkotter]

Sorry for the late review here. Overall this looks really good and works as expected but have a few things that need cleaned up before this is ready to merge.

[dkotter]

I guess one other thing I keep going back to here that's worth bringing up for discussion. Right now this PR pulls content from the README.md file. The benefit here is we don't have to have this information duplicated, it lives in one place and we can use it wherever we want.

There are downsides I keep coming back to:

• If we ever move these instructions out of the README, this will break things (and I would love to find a better place for these, the README is pretty cluttered right now)
• If we ever change the format of any of these instructions (like changing the headings) that will break our parsing
• While we have caching around this, it is an extra HTTP request anytime that cache expires (very minor thing)

I'm not coming up with any great ideas that don't require us to duplicate these instructions in both the README and somewhere else but I think that is probably fine. My thoughts here are maybe these instructions should live within each Provider class, so when you create a new Provider, you are responsible for giving it the instructions. Those instructions can still be in markdown format if we want, but then we aren't having to download a file and we aren't having to parse out the right content from that file.

This also allows us to remove some of the instructions that don't matter. For instance, I think the main part that matters for each Provider is how to get that Provider set up, not how to get the individual Feature set up. Right now we pull that whole chunk from the README but if we have separate instructions with the Provider, we can limit it to just the instructions on how to configure the Provider.

[jeffpaul]

If we ever move these instructions out of the README, this will break things (and I would love to find a better place for these, the README is pretty cluttered right now)

I'd like to get the details out of the README, though perhaps duplicated somewhere on the microsite (eg a Help page/section) and more minimally contextually within the plugin (perhaps with links out to said Help section).

[BhargavBhandari90]

@dkotter

• Now I am getting dependency error for marked package I've used for parsing md file.
• I see marked already have MIT licnese https://www.npmjs.com/package/marked

Do I need to look for an alternative for this?

---

@dkotter @jeffpaul

One thing that came to my mind for #953 (review)

• I see we have hookdocs folder.
• We can add all Instruction in separate md files and can use that file path to a specific class.
• So that we have a freedom of changing content inside md files.
• And on the main README.MD, we can just provide a link to the specific instruction's md file.

[dkotter]

Now I am getting dependency error for marked package I've used for parsing md file.
I see marked already have MIT licnese https://www.npmjs.com/package/marked
Do I need to look for an alternative for this?

No, this should be fine. We've run into this before with that GitHub Action and I think it's a bug on their end (though I thought they had fixed that, I can look into it separately though).

One thing that came to my mind for #953 (review)

I see we have hookdocs folder.
We can add all Instruction in separate md files and can use that file path to a specific class.
So that we have a freedom of changing content inside md files.
And on the main README.MD, we can just provide a link to the specific instruction's md file.

We just merged in #966 that changes how our documentation is built. As part of that, instructions for setting up each Provider have been moved to separate markdown files and may be a better place to pull documentation from in this PR. I'll also probably remove those instructions from our README now and link directly to each relevant section in our documentation site.

Note that we don't ship these files with the production version of the plugin (those get removed during the final build process) which would still require remote requests to get that information. We can look at keeping those files in the final release though if that helps out this PR

[BhargavBhandari90]

@dkotter

We just merged in #966 that changes how our documentation is built. As part of that, instructions for setting up each Provider have been moved to separate markdown files and may be a better place to pull documentation from in this PR. I'll also probably remove those instructions from our README now and link directly to each relevant section in our documentation site.

Note that we don't ship these files with the production version of the plugin (those get removed during the final build process) which would still require remote requests to get that information. We can look at keeping those files in the final release though if that helps out this PR

• Thank you for the update. The changes looks good.

Before making changes, please confirm following:

• Is this final structure?
• With this structure I still have to use regex, what I did in this PR to get relevant content.
• I was suggesting the structure for the instructions as follow
  • wp-hooks-docs/docs/classification(feature)/ibm-instruction.md
  • wp-hooks-docs/docs/classification(feature)/openai-instruction.md

OR

• If this is the final structure, then I'll make changes according to Replace hookdoc with WP Hooks Documentor #966

Let me know your thought on this.

[dkotter]

Is this final structure?
With this structure I still have to use regex, what I did in this PR to get relevant content.

I do think this is the final structure, at least for now. So yes, regex will still need to be used here. I guess my main question is if we want these files to live in the final release zip, which would allow us to pull the information in without doing an external request. As of now, these files are excluded from that final release.

[BhargavBhandari90]

@dkotter

I do think this is the final structure, at least for now. So yes, regex will still need to be used here.

• Thank you for confirming this

I guess my main question is if we want these files to live in the final release zip, which would allow us to pull the information in without doing an external request. As of now, these files are excluded from that final release.

• I will follow your instruction here.
• As the files are going to exclude, I'll do remote request from develop branch

[BhargavBhandari90]

@dkotter I've made changes as per new folder structure.