viz chat gpt

by velo_ninja

HTML

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>

<div id="app">
  <h1>Vis.js Network Example</h1>
  <div class="container">
    <div id="networkContainer" style="border: 1px solid gray;">
    </div>
  </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}

h1 {
  height : 60px;
}

.container {
  flex:1;
  display:flex;
  background-color: blue;

}

#networkContainer {
  height:90%;
  width: 100%:
  background-color: red;
}

JavaScript

const {
  createApp,
  ref,
  onMounted
} = Vue;
const {
  DataSet,
  Network
} = vis;

// Replace 'your-api-key' with your OpenAI API key
const apiKey = '';

const app = createApp({
  setup() {
    const networkContainer = ref(null);
    const nodes = new DataSet();
    const edges = new DataSet();
    let currentId = 1;
    const firstNode = ref(true);

    const sendToChatGPT = async (text) => {
      const response = await fetch('https://api.openai.com/v1/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${apiKey}`,
        },
        body: JSON.stringify({
          model: "text-davinci-003",
          prompt: text,
          max_tokens: 50,
          n: 1,
          stop: null,
          temperature: 0.5,
        }),
      });

      const data = await response.json();
      return data.choices[0].text.trim();
    };


    const addConnectedNodes = async (parentNode) => {
      const response1 = await sendToChatGPT(parentNode.label);
      nodes.add({
        id: ++currentId,
        label: response1
      });
      edges.add({
        from: parentNode.id,
        to: currentId
      });

      const response2 = await sendToChatGPT(`Give me a general improvement on: ${parentNode.label}`);
      nodes.add({
        id: ++currentId,
        label: response2
      });
      edges.add({
        from: parentNode.id,
        to: currentId
      });

      const response3 = await sendToChatGPT(`Give me another general improvement on: ${parentNode.label}`);
      nodes.add({
        id: ++currentId,
        label: response3
      });
      edges.add({
        from: parentNode.id,
        to: currentId
      });
    };

    onMounted(() => {
      const container = document.getElementById('networkContainer');
      const data = {
        nodes,
        edges
      };
      const options = {
        interaction: {
          hover: true
        },
        autoResize: true,
      ...