Backend and site come up but can't create project

[chuckjewell]

Both front-end and back-end come up with no errors.

Can navigate to the ui but Select Project, Select Model, Settings and Logs buttons do not work.

Cant try a prompt without a project created.

[Vishnuxx]

Working on it

[jkihlstad]

I have the fix

[jkihlstad]

Update the controlpanel.svelte where the href=#, change the div classes to button classes

[jkihlstad]

I will push the edit

[jkihlstad]

in the meantime copy this code over into the file. Overwriting everything.

<script>
  import { onMount } from 'svelte';
  import { projectList, modelList, internet } from "../store";
  import { createProject, fetchProjectList, getTokenUsage } from "../api";

  let selectedProject = localStorage.getItem("selectedProject") || "Select Project";
  let selectedModel = localStorage.getItem("selectedModel") || "Select Model";
  let tokenUsage = 0;

  async function updateTokenUsage() {
    tokenUsage = await getTokenUsage();
  }

  function selectProject(project) {
    selectedProject = project;
    localStorage.setItem("selectedProject", project);
  }

  function selectModel(model) {
    selectedModel = `${model[0]} (${model[1]})`;
    localStorage.setItem("selectedModel", model[1]);
  }

  async function createNewProject() {
    const projectName = prompt("Enter the project name:");
    if (projectName) {
      await createProject(projectName);
      await fetchProjectList();
      selectProject(projectName);
    }
  }

  function closeDropdowns(event) {
    const projectDropdown = document.getElementById("project-dropdown");
    const modelDropdown = document.getElementById("model-dropdown");
    const projectButton = document.getElementById("project-button");
    const modelButton = document.getElementById("model-button");

    if (
      !projectDropdown.contains(event.target) &&
      !projectButton.contains(event.target)
    ) {
      projectDropdown.classList.add("hidden");
    }

    if (
      !modelDropdown.contains(event.target) &&
      !modelButton.contains(event.target)
    ) {
      modelDropdown.classList.add("hidden");
    }
  }

  onMount(() => {
    setInterval(updateTokenUsage, 1000);

    document
      .getElementById("project-button")
      .addEventListener("click", function () {
        const dropdown = document.getElementById("project-dropdown");
        dropdown.classList.toggle("hidden");
      });

    document
      .getElementById("model-button")
      .addEventListener("click", function () {
        const dropdown = document.getElementById("model-dropdown");
        dropdown.classList.toggle("hidden");
      });

    document.addEventListener("click", closeDropdowns);

    return () => {
      document.removeEventListener("click", closeDropdowns);
    };
  });
</script>

<div class="control-panel bg-slate-900 border border-indigo-700 rounded">
  <div class="dropdown-menu relative inline-block">
    <button
      type="button"
      class="inline-flex justify-center w-full gap-x-1.5 rounded-md bg-slate-900 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-indigo-700 hover:bg-slate-800"
      id="project-button"
      aria-expanded="true"
      aria-haspopup="true"
    >
      <span id="selected-project">{selectedProject}</span>
      <svg
        class="-mr-1 h-5 w-5 text-gray-400"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
          clip-rule="evenodd"
        />
      </svg>
    </button>
    <div
      id="project-dropdown"
      class="absolute left-0 z-10 mt-2 w-full origin-top-left rounded-md bg-slate-800 shadow-lg ring-1 ring-indigo-700 ring-opacity-5 focus:outline-none hidden"
      role="menu"
      aria-orientation="vertical"
      aria-labelledby="project-button"
      tabindex="-1"
    >
      <div class="py-1" role="none">
        <button
          class="text-white block px-4 py-2 text-sm hover:bg-slate-700"
          on:click|preventDefault={createNewProject}
        >
          + Create new project
        </button>
        {#if $projectList !== null}
          {#each $projectList as project}
            <button
              class="text-white block px-4 py-2 text-sm hover:bg-slate-700"
              on:click|preventDefault={() => selectProject(project)}
            >
              {project}
            </button>
          {/each}
        {/if}
      </div>
    </div>
  </div>

  <div
    class="right-controls"
    style="display: flex; align-items: center; gap: 20px"
  >
    <div class="flex items-center space-x-2">
      <span>Internet:</span>
      <div id="internet-status" class="internet-status" class:online={$internet} class:offline={!$internet}></div>
      <span id="internet-status-text"></span>
    </div>
    <div class="flex items-center space-x-2">
      <span>Token Usage:</span>
      <span id="token-count" class="token-count-animation">{tokenUsage}</span>
    </div>
    <div class="relative inline-block text-left">
      <div>
        <button
          type="button"
          class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-slate-900 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-indigo-700 hover:bg-slate-800"
          id="model-button"
          aria-expanded="true"
          aria-haspopup="true"
        >
          <span id="selected-model">{selectedModel}</span>
          <svg
            class="-mr-1 h-5 w-5 text-gray-400"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
      </div>

      <div
        id="model-dropdown"
        class="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-slate-800 shadow-lg ring-1 ring-indigo-700 ring-opacity-5 focus:outline-none hidden"
        role="menu"
        aria-orientation="vertical"
        aria-labelledby="model-button"
        tabindex="-1"
      >
        <div class="py-1" role="none">
          {#if $modelList}
            {#each $modelList as model}
              <button
                class="text-white block px-4 py-2 text-sm hover:bg-slate-700 w-full text-left"
                on:click|preventDefault={() => selectModel(model)}
              >
                {model[0]} ({model[1]})
              </button>
            {/each}
          {/if}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .internet-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }

  .online {
    background-color: #22c55e;
  }

  .offline {
    background-color: #ef4444;
  }

  @keyframes roll {
    0% {
      transform: translateY(-5%);
    }
    100% {
      transform: translateY(0);
    }
  }

  .token-count-animation {
    display: inline-block;
    animation: roll 0.5s ease-in-out;
  }

  .control-panel {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .control-panel > *:not(:first-child) {
    margin-left: 20px;
  }

  .right-controls > *:not(:last-child) {
    border-right: 1px solid #4b5563;
    padding-right: 20px;
  }
</style>

[nalyk]

same problem. @jkihlstad fix is also not working.

[MEGA-M1ND]

same problem. @jkihlstad fix is also not working.

Same problem here. Relaunched after Fix. It didnt resolve the issue.

[SvenKribitz]

Not working for me either.

[seangillmer]

Not working for me either.

[ihatenumbers]

Make sure to have Devika server running first.

...

5. Start the Devika server:

   python devika.py

6. Compile and run the UI server:

   cd ui/
   bun run dev

[alfi4000]

I used the Quick start method and have same issue even when I start the server first before the interface like mentioned with one difference no Ollama running at the host!: https://github.com/stitionai/devika/issues/37#issuecomment-2015663374

[alfi4000]

The terminal is at start: 7:23:01 PM [vite-plugin-svelte] /home/kali/devika/ui/src/components/ControlPanel.svelte:112:10 A11y: '#' is not a valid href attribute 7:23:01 PM [vite-plugin-svelte] /home/kali/devika/ui/src/components/ControlPanel.svelte:121:14 A11y: '#' is not a valid href attribute 7:23:01 PM [vite-plugin-svelte] /home/kali/devika/ui/src/components/ControlPanel.svelte:183:16 A11y: '#' is not a valid href attribute

[MEGA-M1ND]

I'm getting the same messages as alfi4000 did in the terminal. I also updated the controlpanel.svelte file, started the server, compiled and run again step by step. I'm getting the devika page, but all buttons look unresponsive. Not able to create Project.

[MEGA-M1ND]

Also, I got the following message at the end after I ran the server - python devika.py

ImportError: cannot import name 'is_nltk_available' from 'transformers.utils.import_utils' (D:\Anaconda\Lib\site-packages\transformers\utils\import_utils.py)

Could it be the reason?

[alfi4000]

I'm getting the same messages as alfi4000 did in the terminal. I also updated the controlpanel.svelte file, started the server, compiled and run again step by step. I'm getting the devika page, but all buttons look unresponsive. Not able to create Project.

Yeah like me all buttons unresponsive only create project looks like Apache bar to put an name in but click ok nothing happens!

[hellangleZ]

Same issue, nothing button could push or create, how can fix it?

[hellangleZ]

in the meantime copy this code over into the file. Overwriting everything.

<script>
  import { onMount } from 'svelte';
  import { projectList, modelList, internet } from "../store";
  import { createProject, fetchProjectList, getTokenUsage } from "../api";

  let selectedProject = localStorage.getItem("selectedProject") || "Select Project";
  let selectedModel = localStorage.getItem("selectedModel") || "Select Model";
  let tokenUsage = 0;

  async function updateTokenUsage() {
    tokenUsage = await getTokenUsage();
  }

  function selectProject(project) {
    selectedProject = project;
    localStorage.setItem("selectedProject", project);
  }

  function selectModel(model) {
    selectedModel = `${model[0]} (${model[1]})`;
    localStorage.setItem("selectedModel", model[1]);
  }

  async function createNewProject() {
    const projectName = prompt("Enter the project name:");
    if (projectName) {
      await createProject(projectName);
      await fetchProjectList();
      selectProject(projectName);
    }
  }

  function closeDropdowns(event) {
    const projectDropdown = document.getElementById("project-dropdown");
    const modelDropdown = document.getElementById("model-dropdown");
    const projectButton = document.getElementById("project-button");
    const modelButton = document.getElementById("model-button");

    if (
      !projectDropdown.contains(event.target) &&
      !projectButton.contains(event.target)
    ) {
      projectDropdown.classList.add("hidden");
    }

    if (
      !modelDropdown.contains(event.target) &&
      !modelButton.contains(event.target)
    ) {
      modelDropdown.classList.add("hidden");
    }
  }

  onMount(() => {
    setInterval(updateTokenUsage, 1000);

    document
      .getElementById("project-button")
      .addEventListener("click", function () {
        const dropdown = document.getElementById("project-dropdown");
        dropdown.classList.toggle("hidden");
      });

    document
      .getElementById("model-button")
      .addEventListener("click", function () {
        const dropdown = document.getElementById("model-dropdown");
        dropdown.classList.toggle("hidden");
      });

    document.addEventListener("click", closeDropdowns);

    return () => {
      document.removeEventListener("click", closeDropdowns);
    };
  });
</script>

<div class="control-panel bg-slate-900 border border-indigo-700 rounded">
  <div class="dropdown-menu relative inline-block">
    <button
      type="button"
      class="inline-flex justify-center w-full gap-x-1.5 rounded-md bg-slate-900 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-indigo-700 hover:bg-slate-800"
      id="project-button"
      aria-expanded="true"
      aria-haspopup="true"
    >
      <span id="selected-project">{selectedProject}</span>
      <svg
        class="-mr-1 h-5 w-5 text-gray-400"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
          clip-rule="evenodd"
        />
      </svg>
    </button>
    <div
      id="project-dropdown"
      class="absolute left-0 z-10 mt-2 w-full origin-top-left rounded-md bg-slate-800 shadow-lg ring-1 ring-indigo-700 ring-opacity-5 focus:outline-none hidden"
      role="menu"
      aria-orientation="vertical"
      aria-labelledby="project-button"
      tabindex="-1"
    >
      <div class="py-1" role="none">
        <button
          class="text-white block px-4 py-2 text-sm hover:bg-slate-700"
          on:click|preventDefault={createNewProject}
        >
          + Create new project
        </button>
        {#if $projectList !== null}
          {#each $projectList as project}
            <button
              class="text-white block px-4 py-2 text-sm hover:bg-slate-700"
              on:click|preventDefault={() => selectProject(project)}
            >
              {project}
            </button>
          {/each}
        {/if}
      </div>
    </div>
  </div>

  <div
    class="right-controls"
    style="display: flex; align-items: center; gap: 20px"
  >
    <div class="flex items-center space-x-2">
      <span>Internet:</span>
      <div id="internet-status" class="internet-status" class:online={$internet} class:offline={!$internet}></div>
      <span id="internet-status-text"></span>
    </div>
    <div class="flex items-center space-x-2">
      <span>Token Usage:</span>
      <span id="token-count" class="token-count-animation">{tokenUsage}</span>
    </div>
    <div class="relative inline-block text-left">
      <div>
        <button
          type="button"
          class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-slate-900 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-indigo-700 hover:bg-slate-800"
          id="model-button"
          aria-expanded="true"
          aria-haspopup="true"
        >
          <span id="selected-model">{selectedModel}</span>
          <svg
            class="-mr-1 h-5 w-5 text-gray-400"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
      </div>

      <div
        id="model-dropdown"
        class="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-slate-800 shadow-lg ring-1 ring-indigo-700 ring-opacity-5 focus:outline-none hidden"
        role="menu"
        aria-orientation="vertical"
        aria-labelledby="model-button"
        tabindex="-1"
      >
        <div class="py-1" role="none">
          {#if $modelList}
            {#each $modelList as model}
              <button
                class="text-white block px-4 py-2 text-sm hover:bg-slate-700 w-full text-left"
                on:click|preventDefault={() => selectModel(model)}
              >
                {model[0]} ({model[1]})
              </button>
            {/each}
          {/if}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .internet-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }

  .online {
    background-color: #22c55e;
  }

  .offline {
    background-color: #ef4444;
  }

  @keyframes roll {
    0% {
      transform: translateY(-5%);
    }
    100% {
      transform: translateY(0);
    }
  }

  .token-count-animation {
    display: inline-block;
    animation: roll 0.5s ease-in-out;
  }

  .control-panel {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .control-panel > *:not(:first-child) {
    margin-left: 20px;
  }

  .right-controls > *:not(:last-child) {
    border-right: 1px solid #4b5563;
    padding-right: 20px;
  }
</style>

After change code to this one, can't see the error log on terminal, but same issue on create project or choose model

[angeloluidens]

Same here, nothing happened after copying and pasting the code as indicated.

[beckerben]

This issue pops up if you run bun run dev --host i have found. It stems back to how the src/lib/components/api.js references the API_BASE_URL as localhost is my guess so when it goes to execute the createProject function or any other API call for that matter, they simply won't work.

[alfi4000]

This issue pops up if you run bun run dev --host i have found. It stems back to how the src/lib/components/api.js references the API_BASE_URL as localhost is my guess so when it goes to execute the createProject function or any other API call for that matter, they simply won't work.

So you mean in other words only localhost works and others won’t right!?

[alfi4000]

If so it needs to be fixed very soon!

[earsonlau]

experiencing the same problem, no idea how to fix this.

[beckerben]

So you mean in other words only localhost works and others won’t right!?

That is correct

[alfi4000]

So you mean in other words only localhost works and others won’t right!?

That is correct

Ok, then they should fix that soon!

[alfi4000]

This issue pops up if you run bun run dev --host i have found. It stems back to how the src/lib/components/api.js references the API_BASE_URL as localhost is my guess so when it goes to execute the createProject function or any other API call for that matter, they simply won't work.

@stitionai we need a fix!

[angeloluidens]

This issue pops up if you run bun run dev --host i have found. It stems back to how the src/lib/components/api.js references the API_BASE_URL as localhost is my guess so when it goes to execute the createProject function or any other API call for that matter, they simply won't work.

@stitionai we need a fix!

Yes, I confirm. Changing this statement, 'export const API_BASE_URL = "http://127.0.0.1:1337";' in api.js to 'export const API_BASE_URL = "http://[MY_DOMAIN_NAME]:1337";' worked for me. I use 'bun run dev --host' and mapped [MY_DOMAIN_NAME] to the IP Address I assigned to the remote Linux VM host I use for Devika.

This allowed me to 'Create new project' and ' Select a Model', and Type and Send a Prompt.

No further response from Devika.

[alfi4000]

This issue pops up if you run bun run dev --host i have found. It stems back to how the src/lib/components/api.js references the API_BASE_URL as localhost is my guess so when it goes to execute the createProject function or any other API call for that matter, they simply won't work.

@stitionai we need a fix!

Yes, I confirm. Changing this statement, 'export const API_BASE_URL = "http://127.0.0.1:1337";' in api.js to 'export const API_BASE_URL = "http://[MY_DOMAIN_NAME]:1337";' worked for me. I use 'bun run dev --host' and mapped [MY_DOMAIN_NAME] to the IP Address I assigned to the remote Linux VM host I use for Devika.

This allowed me to 'Create new project' and ' Select a Model', and Type and Send a Prompt.

No further response from Devika.

But I can still not enter the settings, log or home menu!

[cyanheads]

The below makes it dynamic and work both ways

import {
  agentState,
  internet,
  messages,
  modelList,
  projectList,
} from "./store";

const getApiBaseUrl = () => {
  if (typeof window !== 'undefined') {
    // Client-side code
    const host = window.location.hostname;
    if (host === 'localhost' || host === '127.0.0.1') {
      return 'http://127.0.0.1:1337';
    } else {
      return `http://${host}:1337`;
    }
  } else {
    // Server-side code (Node.js)
    return 'http://127.0.0.1:1337';
  }
};

export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || getApiBaseUrl();

[alfi4000]

The below makes it dynamic and work both ways

import {
  agentState,
  internet,
  messages,
  modelList,
  projectList,
} from "./store";

const getApiBaseUrl = () => {
  if (typeof window !== 'undefined') {
    // Client-side code
    const host = window.location.hostname;
    if (host === 'localhost' || host === '127.0.0.1') {
      return 'http://127.0.0.1:1337';
    } else {
      return `http://${host}:1337`;
    }
  } else {
    // Server-side code (Node.js)
    return 'http://127.0.0.1:1337';
  }
};

export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || getApiBaseUrl();

I am not getting what you mean should I change the file and remove all what is inside and replace it with your stuff?

[VADDIJASWANT]

Hey Guys I am facing the same issue how to fix it, I follwed the documentation, once it showed devika is running then in another terminal I did bun run start