Skip to content

Interesting Widget code, but can't fetch API

Solved Customisation
  • @phenomlab
    There may be some confusion here as descriptions to AI art generators are called prompts. So that ‘prompt’ value in Json body is set to my variable promp.

    promp is set by a JS prompt command at the bottom of the code. Its a global variable so available to the octo() function when called.

    Function octo() has the API fetch, comes after the prompt is entered

    Screenshot_20230625_011227_Chrome~2.jpg

  • @Panda yes, but if you run the code directly in the browser a popup prompt asks for a value and won’t proceed until one is provided.

  • @phenomlab yes exactly, and why would it be any different in a widget?
    The JS prompt command is async so will halt the flow till value is entered?

  • @Panda it’s not. If I visit the page you sent me, the popup appears, but no image is returned. This is why I need the console error as there will be one.

  • @phenomlab ah you mean the nodebb console log, not browser inspect console?
    Its nodebb hosted, can you view if you login?

  • @Panda no, the browser console. There is likely a JS error there I need to see.

  • @phenomlab
    I sent link to the aignite.nodebb.com forum above, its on 3d category
    Incidentally a blank prompt string will still generate a random image, so the problems not with the input

  • @Panda yes, but you are missing the point here. I need to see the output of the browser console or at least insert something like the below to return it

    alert(console.log)

    It’s 1:17am here and I’m not in front of a PC, but will check tomorrow.

  • To eliminate any confusion I made a simpler widget which just does hardcoded API call for image of a cat. No user input etc
    Again it runs stand alone, but returns quickly, empty, as a widget
    This example sits on aignite.nodebb.com category 8 (‘Diamond’)
    First example is still in category 10 (‘3d’)

  • @Panda the result=undefined says it all. It still returns null and we need to see the error in the browser console.

  • @Panda Just looking at this, and it seems that the service expects authentication

    49e50e3b-9744-49ef-b524-197f00c07c0b-image.png

    I also see the below in the console

    Failed to load resource: the server responded with a status of 401 (Unauthorized)
    GET data:image/png;base64,undefined net::ERR_INVALID_URL
    {"code":401,"message":"error occurred during proxy authentication: no token in request"}
    
  • Yes. There is a key included and the exact code works as stand-alone, thats why Im wonderinging why not working in a widget

  • @Panda I think this might have something to do with the reverse proxy that nginx runs for NodeBB. Do you use this, or are you using something else?

  • @phenomlab ah! Its nodebb hosted site, so they do all that

  • Pandaundefined Panda has marked this topic as solved on
  • @phenomlab
    Two things

    1. this particular forum had plans to integrate tools which use API calls into widgets.
      Now we reached the point of finding possible reason why API calls dont work, is there anyway round that?

    2. General forum question: because there were few ‘Red Herrings’ while exploring this issue, I was tempted to tidy up this thread by deleting some of the erroneous comments.
      I noticed before this forum has tight restriction times on editing / removing comments. I guess this is intentional. Is your experience that it is better to have this on a forum rather than unlimited edit / delete timer?

  • @Panda said in Interesting Widget code, but can’t fetch API:

    this particular forum had plans to integrate tools which use API calls into widgets.
    Now we reached the point of finding possible reason why API calls dont work, is there anyway round that?

    Actually, yes. I had a similar issue with the below (which you might enjoy also) when running in a page widget

    https://sudonix.org/cbg

    For this to work, I needed to call the script externally, and so used the below widget code as a guide

    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </head>
    <style>
    .cbgresult {
        margin: 10px 0 15px 0;
        padding: 15px;
        border-radius: 6px;
        font-family: "Source Code Pro", Menlo,Monaco,Consolas,"Courier New",monospace;
        font-size: 2rem;
        text-align: center;
        background: var(--bs-code-block) !important;
    }
    .cbgresult:after {
    content: '"';
    }
    .cbgresult:before {
    content: '"';
    }
    .cbgheader {
        margin-top: 40px;
        text-align: center;
    }
    .generate {
        text-align: center;
    }
    </style>
    <script src="/assets/js/cbg.js"></script>
    <div class="cbgheader">
    <h2>Corporate BS Generator</h2>
    <p>
    Need a better sounding line? Just click the "Generate Another" button to get another killer phrase.
    </p>
    </div>
    <div id="cbg" class="cbgresult"></div>
    <div class="generate">
    <button id="reloadme" class="btn btn-primary">Generate Another</button>
    </div>
    <script>
    $(function() { // after page load
        $('.cbgresult').fadeOut(0, function() {
        $("#cbg").show();
            $(this).html(phrase());
       });
    });
    $(document).ready(function(){
    $("#cbg").show();
        $('#reloadme').click(function(){
     $("#cbg").html(phrase());
        });
    });
    </script>
    

    @Panda said in Interesting Widget code, but can't fetch API:

    I noticed before this forum has tight restriction times on editing / removing comments. I guess this is intentional. Is your experience that it is better to have this on a forum rather than unlimited edit / delete timer?

    This is correct. Posts can only be deleted before a set time period elapses, which is 30 minutes

    915f61df-01e9-40bb-9e9f-937abb2e1494-image.png

    The intention here is to give you sufficient time to remove something you feel wasn’t relevant, or you really shouldn’t have posted (see policies), but for the sake of conversational flow, posts are then indelible because they add weight and value to the overall thread. For example, if you reference a comment in the thread, but that particular post is deleted, then the discussion becomes diluted.

    Using this approach, it makes it easier for anyone else with a similar issue to see how we resolved it.

  • phenomlabundefined phenomlab has marked this topic as unsolved on
  • @phenomlab
    That is interesting code example!
    It raises new question
    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

  • @Panda said in Interesting Widget code, but can’t fetch API:

    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Yes, here

    https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044

    It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets.

    @Panda said in Interesting Widget code, but can’t fetch API:

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

    By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget.

    Hope this makes sense?

  • Pandaundefined Panda has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • CSS code customization for the link preview plugin

    Solved Customisation
    4
    3 Votes
    4 Posts
    598 Views

    @crazycells said in CSS code customization for the link preview plugin:

    does OGProxy show the pdf previews as well?

    Not yet, but it could with a bit of additional code.

  • Top Ranked Forums

    Chitchat
    9
    3 Votes
    9 Posts
    570 Views

    The real issue here is that most people consider forums to be “dead” in the sense that nobody uses them anymore, and social media groups have taken their place. Their once dominant stance in the 90’s and early 00’s will never be experienced again, but having said that, there are a number of forums that did in fact survive the social media onslaught, and still enjoy a large user base.

    Forums tend to be niche. One that immediately sticks out is Reddit - despite looking like it was designed in the 80s, it still has an enormous user base. Another is Stack Overflow, which needs no introduction. The key to any forum is the content it offers, and the more people whom contribute in terms of posting , the more popular and widely respected it becomes as a reliable source of information.

    Forums are still intensely popular with gamers, alongside those that offer tips on hacking etc.

  • Post Style View

    Solved Customisation
    67
    18 Votes
    67 Posts
    6k Views

    @cagatay

    Just add margin-left on the element like @phenomlab said to you :

    topic [component="post/parent"] { margin-left: 10px; }

    aa08c62b-4223-4cba-8c0f-c73d50474c0d-image.png

    Maybe @phenomlab have a better way

  • answers appearance css code request

    Solved Customisation
    11
    1 Votes
    11 Posts
    830 Views

    @DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.

  • creating topic specific widgets

    Solved Customisation
    16
    10 Votes
    16 Posts
    1k Views

    @crazycells said in creating topic specific widgets:

    Additionally if hide class exists, why are we re-defining it?

    We’re not 🤭 I misspelled it - it should be hidden

  • IRC Server/Client - Chat App with NodeBB

    Linux
    6
    1 Votes
    6 Posts
    678 Views

    @Hari not sure from the consumer perspective, but Skype has been all but completely consumed by Microsoft Teams when it comes to business usage.

  • CSS codes for fa-info icon

    Solved Customisation
    9
    6 Votes
    9 Posts
    636 Views

    I have just figured it out…

    it can be targeted with text-decoration-color:

    I was mistakenly using color

  • Display tweets in widget [NodeBB]

    Solved Customisation
    29
    4 Votes
    29 Posts
    3k Views

    @phenomlab brilliant, many thanks Mark 😁