Skip to content

DJANGO AND VIS.JS

Multimodal Graph Database with embeadded RAG

This Django setup integrates Neo4j, FAISS, and Ollama for a multimodal product recommendation system. aa


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
        <link href="https://unpkg.com/vis-network/styles/vis-network.min.css" rel="stylesheet" type="text/css" />

  <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
  <style>
    #mynetwork {
      width: 400px;
      height: 400px;
      border: 1px solid lightgray;
    }
    img{
      height: 100px;
    }
  </style>
    <title>Document</title>
</head>
<body>
<div class="lg:w-4/5 mx-auto flex flex-wrap items-start">
  <!-- Left side -->
  <div class="lg:w-1/2 w-full lg:pr-10">
    <h1 class="text-gray-900 text-3xl title-font font-medium mb-4">Multimodal Graph Database</h1>

    <form class="max-w-sm mx-auto" method="POST" action="/recommend/">
      {% csrf_token %}
      <div class="mb-5">
        <label for="large-input" class="block mb-2 text-sm font-medium text-gray-900">Ask Question</label>
        <input name="query" type="text" id="large-input" class="block w-full p-4 border rounded-lg bg-gray-50">
      </div>
      <div class="flex">
        <button class="ml-auto text-white bg-indigo-500 py-2 px-6 rounded hover:bg-indigo-600">Submit</button>
      </div>
    </form>

    {% if result %}
    <hr class="my-4">
    <h4>Results:</h4>
    {{ result }}
    {% endif %}



  <!-- Right side -->
 <div class="lg:w-1/2 w-full">
  <div id="mynetwork"></div>
</div>

<script type="text/javascript">
  // Safely parse Django context data
  let reviews = [];
  try {
      reviews = JSON.parse('{{ bfs|escapejs }}');
  } catch (e) {
      console.error("Error parsing BFS data:", e);
  }

  const nodes = [];
  const edges = [];
  const nodeMap = {}; // Use an object to track added nodes

  reviews.forEach(item => {
      // Source node
      const sourceId = String(item.n.id);
      if (!nodeMap[sourceId]) {
          nodes.push({ id: sourceId, label: sourceId });
          nodeMap[sourceId] = true;
      }

      // Relation and target node
      if (item.r && item.r.length === 3) {
          const relationLabel = String(item.r[1]);
          const targetId = String(item.r[2].id);

          if (!nodeMap[targetId]) {
              nodes.push({ id: targetId, label: targetId });
              nodeMap[targetId] = true;
          }

          edges.push({ from: sourceId, to: targetId, label: relationLabel, arrows: 'to' });
      }
  });

  // Initialize Vis.js network
  const container = document.getElementById('mynetwork');
  const data = {
      nodes: new vis.DataSet(nodes),
      edges: new vis.DataSet(edges)
  };
  const options = {
      edges: {
          arrows: 'to',
          font: { align: 'middle' }
      },
      layout: { improvedLayout: true },
      physics: { stabilization: true }
  };

  const network = new vis.Network(container, data, options);
</script>


</section>
</body>
</html>